1.scrollHeight/Width
scrollHeight/Width
是一个只读的属性,元素的内容高度/宽度,包括由于overflow属性而不可见的部份。不能直接从css中获得。scrollHeight/Width
的值除了内容高度/宽度,也包括padding值
。scrollWidth
相似。
2.scrollTop/Left
以scrollLeft
为例:scrollLeft
属性能够获得或许设置元素转动到左侧的像素值。注重(rtl和ltr会差别)
假如element不能够scroll的时刻,比方没有设置overflow属性。scrollLeft会被重置为0,不论你设置什么值,都不会有什么结果。(这也是许多scrollLeft失效的缘由)
设置的值小于0,重置为0
设置的值凌驾内容许可转动的最大值,重置为最大值。
注重事项:scrollLeft属性是应用在父元素上面,而不是子元素。
别的scrollTop
与scrollLeft相似。
3. offsetHeight/Width
offsetHeight/Width
是一个只读属性,返回一个元素的构造宽度,包括元素的border和padding、转动条(假如存在的话)和css设置的高度/宽度。
4.offsetTop/Left
以offsetLeft
为例, 返回当前元素左上角相关于HTMLElement.offsetParent
节点的左侧界偏移的像素值。
HTMLElement.offsetParent
:一个只读属性,返回一个指向近来的包括该元素的定位元素。假如没有定位的元素,则offsetParent
为近来的 table 元素或根元素(规范形式下为 html;quirks 形式下为 body)。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。offsetParent 很有效,由于 offsetTop 和 offsetLeft 都是相关于其内边距边境的。
比方:
<div style="width: 300px; border-color:blue;
border-style:solid; border-width:1;">
<span>Short span. </span>
<span id="long">Long span that wraps within this div.</span>
</div>
<div id="box" style="position: absolute; border-color: red;
border-width: 1; border-style: solid; z-index: 10">
</div>
<script>
var box = document.getElementById("box");
var long = document.getElementById("long");
box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
box.style.top = long.offsetTop + document.body.scrollTop + "px";
box.style.width = long.offsetWidth + "px";
box.style.height = long.offsetHeight + "px";
console.log(long.offsetParent) //offsetParent为body
</script>
offsetTop
相似的原理。
5.clientWidth/Height
clientWidth/Height
是一个只读属性,关于没有css或许内联元素,其值为0。它包括内部的宽度和高度和padding,但不包括转动条、border和margin。
6.clientTop/Left
clientTop/Left
指的是一个元素顶部/左侧框的宽度。
7. 区分
摘自stackoverflow的一幅图,能够很好地看到之间的区分:
8.clientX/Y
clientX/Y
属性返回当事宜被触发时鼠标指针向关于浏览器页面(或客户区)的程度/竖直坐标,不包括转动条转动才显现的地区。定位的根据为浏览器窗口内容地区的左上角。
9.offsetX/Y(experimental technology)
offsetX/Y
设置或许是获得鼠标相关于目的事宜的父元素的内边境在X/Y坐标上的位置
10.screenX/Y
screenX/Y
相关于物理屏幕/监视器的左上角,只要你增添或削减显现器的数目或分辨率,参考点才会挪动。
11.pageX/Y
pageX/Y
相关于全部衬着页面的左上角(包括经由过程转动隐蔽的部份),简朴来讲就是<html>
元素。
参考资料
1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively