这篇文章主要是对 js 鼠标及对象坐标控制属性进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。
offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
clientHeight
获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
SCROLL 属性
scroll
设置或获取滚动是否关闭。
scrollHeight
获取对象的滚动高度。
scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth
获取对象的滚动宽度。event 属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标
offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 html 控件,则又有不同。
这四种浏览器分别为 IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。 NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。 简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
js 获取页面高度
- <script>
- function getInfo()
- {
- var s = "";
- s += " 网页可见区域宽:"+ document.body.clientWidth;
- s += " 网页可见区域高:"+ document.body.clientHeight;
- s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
- s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
- s += " 网页正文全文宽:"+ document.body.scrollWidth;
- s += " 网页正文全文高:"+ document.body.scrollHeight;
- s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
- s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
- s += " 网页被卷去的左:"+ document.body.scrollLeft;
- s += " 网页正文部分上:"+ window.screenTop;
- s += " 网页正文部分左:"+ window.screenLeft;
- s += " 屏幕分辨率的高:"+ window.screen.height;
- s += " 屏幕分辨率的宽:"+ window.screen.width;
- s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
- s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
- s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
- s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
- //alert (s);
- }
- getInfo();
- </script>
在我本地测试当中: 在 IE、FireFox、Opera 下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得,很简单,很方便。 而在公司项目当中: Opera 仍然使用 document.body.clientWidth document.body.clientHeight 可是 IE 和 FireFox 则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是 W3C 的标准在作怪啊 如果在页面中添加这行标记的话
来源: