JS中的offsetLeft和clientLeft和scrollLeft的一些区别

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。
obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。

我们对前面提到的 offsetParent 作个说明：
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。
以上属性在 FireFox 中也有效。

另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的）

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

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 的解释与上面相同，只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。

scrollTop 是“卷”起来的高度值，示例：

如果为 p 设置了 scrollTop，这些内容可能不会完全显示。

var p = document.getElementByIdx_x(“p”);
p.scrollTop = 10;

由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷，这卷起来的部分就是 scrollTop。

scrollLeft 也是类似道理。
我们已经知道 offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。
IE 和 FireFox 全面支持，而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。

scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollLeft属性与scrollTop属性的作用相同,两者的区别在于 scrollTop是获取滚动条向下拉动的值，而scrollLeft是获取滚动向右拉动的值．．都是用来获取网页或网页内某个元素滚动条被拉动的值，也就是说滚动条被拉动了移动的数值．

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指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

JS中的offsetLeft和clientLeft和scrollLeft的一些区别相关推荐

return true Java_[Java教程]js中return,return true,return false的用法及区别
[Java教程]js中return,return true,return false的用法及区别 0 2015-11-16 23:00:03 1.语法及返回方式 ①返回控制与函数结果语法为:retu ...
php in循环与for循环,详谈js中标准for循环与foreach(for in)的区别
js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i alert(array[i]) } //foreach循环 for(var i in ar ...
js中的offsetLeft和style.left
(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...
php+js+return+true,js中return、return false、return true的区别
1.语法及返回方式 ①返回控制与函数结果语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ②返回控制无函数结果语法为:return; 在大多数 ...
js中定义变量加var和不加var的区别
这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清楚,又问我是不是可以不加var定义变量... 正好昨天做项目的时候想到这个问题,觉得这种细节上的问题才是拉开差距的 ...
分享下offsetLeft和clientLeft和scrollLeft区别的总结
在做前端的时候很多时间都会用到offset,clientLeft,scrollLeft-类似这样的属性,他们到底有什么区别呢?他们分别是指哪里呢?我们一起来分析分析. 1.offsetWidth,of ...
js中parseInt与parseFloat在进制转换的区别
项目中需要转换一个16进制数0x00000000000000000000000000000000000000001c0bed842bda49e0fc480000,因为考虑到可能是一个小数,所以使用了p ...
js中document.getElementById(ID)与document.getElementsByName(Name)的区别
在一个HTML文档中,每个元素都可以设置ID和NAME属性.其中ID属性是唯一属性,不可以重复,一个ID值只能对应一个元素:而NAME属性是可以重复的,一个NAME值可以对应一组元素. 所以,使用do ...
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
1 escape()函数定义和用法escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法escape(string) 参数描述string 必需.要被转义或编码的 ...

JS中的offsetLeft和clientLeft和scrollLeft的一些区别

JS中的offsetLeft和clientLeft和scrollLeft的一些区别相关推荐

最新文章

热门文章