javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解

編輯：JavaScript基礎知識

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均無關)

<!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" lang="gb2312"> <head> <head> <title> 
代碼實例：關於clientWidth、offsetWidth、clientHeight、offsetHeight的測試比較 
</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<meta name="author" content="楓巖,CnLei.y.l@gmail.com"> 
<meta name="copyright" content="http://www.jb51.net" /> 
<meta name="description" 
content="關於clientWidth、offsetWidth、clientHeight、offsetHeight的測試比較" 
/> <style type="text/css" media="all"></style><style type="text/css" media="all" bogus="1"> body {font-size:14px;} 
a,a:visited {color:#00f;} #Div_CnLei { width:300px; height:200px; 
padding:10px; border:10px solid #ccc; background:#eee; font-size:12px; 
} #Div_CnLei p {margin:0;padding:10px;background:#fff;} </style> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> <p>點擊下面的鏈接:</p>  <p>GetClientWidth(); 
GetClientHeight();</p> 
<p>GetOffsetWidth(); 
GetOffsetHeight();</p> 
  
<p><strong>IE6.0、FF1.06+：</strong>
 
clientWidth = width + padding = 300+10×2 = 320
 clientHeight 
= height + padding = 200+10×2 = 220
 offsetWidth = width + 
padding + border = 300+10×2+10×2= 340
 offsetHeight = height 
+ padding + border = 200+10×2+10×2 = 240</p> 
<p><strong>IE5.0/5.5：</strong>
 
clientWidth = width - border = 300-10×2 = 280
 clientHeight 
= height - border = 200-10×2 = 180
 offsetWidth = width = 
300
 offsetHeight = height = 200</p>  
</body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

JavaScript基礎知識

javascript對話框使用方法(警告框 javascript確認框提示框): 1.警告框警告框經常用於確保用戶可以得到某些信息。當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操
JavaScript DOM 學習第五章表單簡介: 因為每一個表單的檢測項都不同，所以我也不能給你一個萬能的代碼。你需要用我在這一章介紹的這些元素構建自
JavaScript學習總結【10】、DOM 事件: DOM 事件是 JS 中比較重要的一部分知識，所謂事件，簡單理解就是用戶對浏覽器進行的一個操作。事件

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章