网站地图    收藏   

主页 > 采坑 > 前端采坑 > js鼠标事件常见坑 >

Js中 关于top、clientTop、scrollTop、offsetTop等

来源:未知    时间:2021-05-09 16:19 作者:小飞侠 阅读:

[导读] 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.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;


//**************************************************************************

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



<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>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论