js鼠标及对象坐标控制属性详细解析


Posted in Javascript onDecember 14, 2013

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

真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

Javascript 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
jQuery实现全选按钮
Jan 01 jQuery
vue实现可拖拽的dialog弹框
May 13 Vue.js
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 #Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 #Javascript
js获取url中指定参数值的示例代码
Dec 14 #Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 #Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 #Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 #Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 #Javascript
You might like
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python基于template实现字符串替换
2020/11/27 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
教师个人的自我评价分享
2014/01/02 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
租房协议书范例
2014/10/14 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
股东大会通知
2015/04/24 职场文书
关于保护环境的建议书
2019/06/24 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis