JS:body元素物件的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
阿新 • • 發佈:2019-01-24
document.body.clientWidth
獲取body元素物件的內容可視區域的寬度,即clientWidth=width+padding,不包括滾動條。
document.body.clientHeight
獲取body元素物件的內容可視區域的高度,即clientHeight=height+padding,不包括滾動條。
瀏覽器相容性
在IE7中,如果給body設定滾動條的話,滾動條是出現在body內部的。所以當給body設定width和height時,在IE7中clientWidth和clientHeight的值是要比其它瀏覽器中的值小一些的。
document.body.offsetWidth
獲取body元素物件的寬度,即offsetWidth=width+padding+border,也可以寫成offsetWidth=clientWidth+border。
document.body.offsetHeight
獲取body元素物件的高度,即offsetHeight=height+padding+border,也可以寫成offsetHeight=clientHeight+border。
瀏覽器相容性
在IE7中,如果給body設定滾動條的話,滾動條是出現在body內部的。所以offsetWidth和offsetHeight的值還需要加上滾動條的寬度。當然最終的值和其它瀏覽器是一樣的。
document.body.scrollWidth
獲取body元素物件內容的實際寬度,即物件的滾動寬度。
document.body.scrollHeight
獲取body元素物件內容的實際高度,即物件的滾動高度。
瀏覽器相容性
- 在FireFox和IE中,其獲取的就是body元素物件內部內容的實際寬高。
- 在Chrome、Safari、Opera中,scrollWidth和scrollHeight獲取的是整個頁面文件的滾動寬高。
document.body.clientLeft
獲取body元素物件的左邊框的寬度。
document.body.clientTop
獲取body元素物件的上邊框的寬度。
瀏覽器相容性
各瀏覽器表現一致。
document.body.offsetLeft
獲取body元素物件相對於自身的位置。
document.body.offsetTop
獲取body元素物件相對於自身的位置。
瀏覽器相容性
- 在Chrome、Opera、Safari、IE8、IE9和IE10中,工作正常,offsetLeft和offsetTop的值都為0。
- 在FireFox中,offsetLeft和offsetTop的值為負的body元素的border-width。
- 在IE7中,offsetLeft和offsetTop指的是body元素物件的邊框(不包括邊框)到頁面文件邊緣的距離。
document.body.scrollLeft
獲取頁面文件向右滾動過的畫素數。
document.body.scrollTop
獲取頁面文件向下滾動過的畫素數。
瀏覽器相容性
- 在FireFox、IE8、IE9和IE10中,scrollLeft和scrollTop的值始終為0。
- 在IE7中,scrollLeft和scrollTop的值為body元素物件最頂端和物件內容的最頂端之間的距離,即滾動條滾過的距離。
本文所用的測試程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>鬼眼邪神的部落格</title> <meta name="author" content="鬼眼邪神"/> <meta name="description" content="部落格地址http://cyg7561.blog.163.com/"/> <style> *{ margin:0; padding:0; } html { margin:20px; padding:20px; width:600px; border:10px solid #000; } body { margin:0 0 0 100px; width:400px; height:800px; border:5px solid #000; background:yellow; overflow:scroll; } .green { position:relative; margin:50px auto; padding:20px; width:80px; height:80px; border:10px solid #000; background:rgb(0,255,0); } .con { margin:0 auto; width:380px; } </style> <script> (function(){ window.onload=function (){ var con=document.getElementById("con"); var green=document.getElementById("green"); var body=document.getElementById("body"); document.onclick=function (event){ var event=window.event||event; con.innerHTML= "document.body.clientWidth="+document.body.clientWidth+","+ "document.body.clientHeight="+document.body.clientHeight+"<br/>"+ "document.body.offsetWidth="+document.body.offsetWidth+","+ "document.body.offsetHeight="+document.body.offsetHeight+"<br/>"+ "document.body.scrollWidth="+document.body.scrollWidth+","+ "document.body.scrollHeight="+document.body.scrollHeight+"<br/>"+ "document.body.clientLeft="+document.body.clientLeft+","+ "document.body.clientTop="+document.body.clientTop+"<br/>"+ "document.body.offsetLeft="+document.body.offsetLeft+","+ "document.body.offsetTop="+document.body.offsetTop+"<br/>"+ "document.body.scrollLeft="+document.body.scrollLeft+","+ "document.body.scrollTop="+document.body.scrollTop+"<br/>"; } } })(); </script> </head> <body> <div class="green" id="green"> <div class="red"></div> </div> <div class="con" id="con"></div> </body> </html>