標籤：des style class blog http get
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元素對象內容的實際高度，即對象的滾動高度。
瀏覽器安全色性擷取body元素對象的左邊框的寬度。
document.body.clientTop擷取body元素對象的上邊框的寬度。
瀏覽器安全色性各瀏覽器表現一致。
document.body.offsetLeft擷取body元素對象相對於自身的位置。
document.body.offsetTop擷取body元素對象相對於自身的位置。
瀏覽器安全色性擷取頁面文檔向右滾動過的像素數。
document.body.scrollTop擷取頁面文檔向下滾動過的像素數。
瀏覽器安全色性<!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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
