JavaScript表單操作

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

來源：封塵網作者：admin 發布時間：2009-03-12 13:38:03

網頁可見地區寬：document.body.clientWidth
網頁可見地區高：document.body.clientHeight
網頁可見地區寬：document.body.offsetWidth (包括邊線的寬)
網頁可見地區高：document.body.offsetHeight (包括邊線的寬)
網頁本文全文寬：document.body.scrollWidth
網頁本文全文高：document.body.scrollHeight
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁本文部分上：window.screenTop
網頁本文部分左：window.screenLeft
螢幕解析度的高：window.screen.height
螢幕解析度的寬：window.screen.width
螢幕可用工作區高度：window.screen.availHeight
螢幕可用工作區寬度：window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 擷取對象的滾動高度。
scrollLeft:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離
scrollTop:設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離
scrollWidth:擷取對象的滾動寬度
offsetHeight:擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft:擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop:擷取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

IE，FireFox 差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

網頁可見地區寬： document.body.clientWidth
網頁可見地區高： document.body.clientHeight
網頁可見地區寬： document.body.offsetWidth (包括邊線的寬)
網頁可見地區高： document.body.offsetHeight (包括邊線的高)
網頁本文全文寬： document.body.scrollWidth
網頁本文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁本文部分上： window.screenTop
網頁本文部分左： window.screenLeft
螢幕解析度的高： window.screen.height
螢幕解析度的寬： window.screen.width
螢幕可用工作區高度： window.screen.availHeight
螢幕可用工作區寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術要點
本節代碼主要使用了Document對象關於視窗的一些屬性，這些屬性的主要功能和用法如下。

要得到視窗的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測視窗的真實尺寸，
在Netscape下需要使用Window的屬性；在 IE下需要深入Document內部對body進行檢測；
在DOM環境下，若要得到視窗的尺寸，需要注意根項目的尺寸，而不是元素。

Window對象的innerWidth屬性包含當前視窗的內部寬度。Window對象的innerHeight屬性包含當前視窗的內部高度。

Document對象的body屬性對應HTML文檔的標籤。Document對象的documentElement屬性則表示HTML文檔的根節點。

document.body.clientHeight表示HTML文檔所在視窗的當前高度。
document.body. clientWidth表示HTML文檔所在視窗的當前寬度。

實現代碼

[-]Download 52004.txt

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器視窗</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">請調整瀏覽器視窗大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器視窗的實際尺寸-->
瀏覽器視窗 的 實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器視窗 的 實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!-- 
var winWidth = 0;
   var winHeight = 0;
   function findDimensions() //函數：擷取尺寸
   {
   //擷取視窗寬度
   if (window.innerWidth)
   winWidth = window.innerWidth;
   else if ((document.body) && (document.body.clientWidth))
   winWidth = document.body.clientWidth;
   //擷取視窗高度
   if (window.innerHeight)
   winHeight = window.innerHeight;
   else if ((document.body) && (document.body.clientHeight))
   winHeight = document.body.clientHeight;
   //通過深入Document內部對body進行檢測，擷取視窗大小
   if (document.documentElement  && document.documentElement.clientHeight 
&& document.documentElement.clientWidth)
   {
   winHeight = document.documentElement.clientHeight;
   winWidth = document.documentElement.clientWidth;
   }
   //結果輸出至兩個文字框
   document.form1.availHeight.value= winHeight;
   document.form1.availWidth.value= winWidth;
   }
   findDimensions();
   //調用函數，擷取數值
   window.onresize=findDimensions;

//-->
</script>
</body>
</html>

來源程式解讀

（1）程式首先建立一個表單，包含兩個文字框，用於顯示視窗當前的寬度和高度，
並且，其數值會隨視窗大小的改變而變化。

（2）在隨後的JavaScript代碼中，首先定義了兩個變數winWidth和winHeight，
用於儲存視窗的高度值和寬度值。

（3）然後，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到視窗的高度和寬度
，並將二者儲存在前述兩個變數中。

（4）再通過深入Document內部對body進行檢測，擷取視窗大小，並儲存在前述兩個變數中。

（5）在函數的最後，通過按名稱訪問表單元素，結果輸出至兩個文字框。

（6）在JavaScript代碼的最後，通過調用findDimensions ( )函數，完成整個操作。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More