题目
本日头条的一道笔试题,offsetWidth、clientWidth、scrollWidth的区分。
剖析
JS中document对象的宽高有三种,cilent、offset、scroll
client: clientWidth和clientHeight,clientTop和clientLeft
clientWidth和clientHeight:该属性指的是元素的可视部份宽度和高度,即padding+content
,统分为三种状况:
- 假如元素无padding无转动
clientWidth = style.width
- 假如元素有padding无转动
clientWidth = style.width + style.padding*2
- 假如元素有padding有转动,且转动是显现的
clientWidth = style.width + style.padding*2 - 转动轴宽度
clientHeight同理
clientTop和clientLeft :这一对属性是用来读取元素的border
的宽度和高度的
clientTop = border-top 的 border-width
clientLeft = border-left 的 border-width
body {
width: 500px;
height: 500px;
border: 20px solid red;
margin: 20px;
padding: 10px;
}
div {
width: 300px;
height: 300px;
margin: 10px;
padding: 20px;
border: 20px solid gray;
overflow: auto;
}
<body>
<div id="app">
我是笔墨<br>
我是笔墨<br>
我是笔墨<br>
我是笔墨<br>
我是笔墨<br>
</div>
</body>
效果如图:
offset:offsetWidth和offsetHeight,offsetTop和offsetLeft
offsetWidth和offsetHeight:这一对属性指的是元素的border+padding+content
的宽度和高度
该属性和其内部的内容是不是超越元素大小无关,只和原本设置的border
以及width
和height
有关。统分为三种状况:
- 假如元素无padding无转动无border
offsetWidth = clientWidth = style.width
- 假如元素有padding无转动有border
offsetWidth = style.width = style.padding*2 + border宽度*2
- 假如元素有padding有转动有border,且转动是显现的
offsetWidth = style.width = style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滚轴宽度 + border宽度*2
offsetHeight同理
offsetTop和offsetLeft:这个须要先相识offsetParent,划定规矩以下
- 假如当前元素的父级元素没有举行css定位(position为absolute或relative),
offsetParent为body
- 假如当前元素的父级元素中有ccss定位(position为absolute或relative),
offsetParent取近来的谁人父级元素
offsetTop和offsetLeft的盘算划定规矩以下:
-
在IE8/9/10以及chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border宽度) + (offsetParent的padding-left) + (当前元素的margin-left) -
在FireFox中
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (当前元素的margin-left)offsetTop同理
style和body代码同上。效果如图:
scroll:scrollWidth和scrollHeight,scrollTop和scrollLeft
scrollWidth和scrollHeight:细分为body和其他元素,这里不对body做引见(细致引见请点击)
在某div中scrollWidth和scrollHeight盘算划定规矩以下
- 无转动轴时:
scrollWidth = clientWhidth = style.width + style.padding*2
- 有转动轴时:
scrollWidth = 现实内容的宽度 + padding*2
scrollHeight同理
scrollTop和scrollLeft:这对元素是可读写的,指的是当元素个中的内容超越其宽高的时刻,元素被卷起的宽度和高度。
style和body代码同上。效果如图:
更细致的引见,请点击