您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
js鼠标及对象坐标控制属性详细解析
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要是对js鼠标及对象坐标控制属性进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
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的标准在作怪啊 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 如果在页面中添加这行标记的话 在IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 在FireFox中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 在Opera中： document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 而如果没有定义W3C的标准，则 IE为： document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为： document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。- 上一个程序编程： JS批量操作CSS属性详细解析
- 下一个程序编程： JS和JQUERY获取页面大小,滚动条位置,元素位置
