关于top、clientTop、scrollTop、offsetTop等的介绍 




clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height


IE，FireFox 差异如下：


IE6.0、FF1.06+： 



clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border


IE5.0/5.5： 



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;


网页可见区域宽： 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;

 


​​【转】关于top、clientTop、scrollTop、offsetTop等_工作区​​

​​本博客新站点 ◆ 前端里 ◆ 欢迎围观：）​​

作者：山边小溪

主站：​​yyyweb.com​​ 记住啦：）

欢迎任何形式的转载，但请务必注明出处。