首页 > 其他分享> 文章详细

offset、client、scroll区别

2020-01-15 09:04:26 阅读：244 来源： 互联网

标签：offsetWidth 100px wrapper height width client offset border scroll

offset

一句话：除了 margin 我们都要。

offsetWidth & offsetHeight

offsetWidth = cssWidth + padding + border;

offsetHeight = cssHeight + padding + border;

注意：如果将元素的box-sizing设置为border-box，offsetWidth 就等于 cssWidth。

举个例子：

#wrapper{
    width:100px;
    height:100px;
    padding:10px;
    margin:4px;
    border:1px solid red;
}
<div id='wrapper'></div>

输出的结果：

wrapper's offsetHeight：122px
wrapper's offsetWidth：122px

offsetLeft & offsetTop

offsetLeft & offsetTop = 相对祖先元素（position 不为 static 的元素）的偏移量；

举个例子：

wrapper 未设置 position

#wrapper{
    width:100px;
    height:100px;
    padding:10px;
    margin:4px;
    border:1px solid red;
}
#content{
    width:50px;
    height:50px;
    padding:5px;
    margin:3px;
    border:1px solid red;
}
<div id='wrapper'>
    <div id="content"></div>
</div>

输出的结果：

wrapper's offsetLeft：4px
wrapper's offsetTop：4px
content's offsetLeft：18px（相对于 html 的偏移量）
content's offsetTop：18px

将wrapper 的 position 设置为 relative

#wrapper{
    width:100px;
    height:100px;
    padding:10px;
    margin:4px;
    border:1px solid red;
    position:relative;
}

输出结果

content's offsetLeft：13px（相对于 warpper 元素的偏移量）
content's offsetTop：13px

client

一句话：等于 offset 去掉 border 和滚动条。

clientWidth & clientHeight

offset 减去 border 和滚动条的宽度就等于 client。

clientWidth = offsetWidth - border - scrollBar；
clientHeight = offsetHeight - border - scrollBar；

clientLeft & clientTop

没有（左侧/顶部）滚动条时，clientLeft 与 clientTop 等于 border 的宽度，有（左侧/顶部）滚动条时，等于 border 的宽度 + 滚动条的宽度。

特殊情况

当我们在获取<html>元素（document. documentElement）尺寸的时候，client 给出的是 viewport 的尺寸，即浏览器的可视区域尺寸，而 offset 给出的是<html>元素的尺寸，例如：浏览器宽度是 1920px，当修改<html>元素的宽度为 10% 时，document. documentElement.clientWidth 为 1920，document. documentElement.offsetWidth 为 192。

scroll

scrollWidth & scrollHeight

scrollWidth = clientWidth + 溢出内容尺寸；
scrollHeight = clientHeight + 溢出内容尺寸；

scrollTop & scrollLeft

scrollTop：这个元素的顶部到视口可见内容的顶部的距离，当一个元素的内容没有产生垂直方向的滚动条，那么 scrollTop 为 0，scrollLeft 同理。

除了上述的方法外，还有 getComputedStyle 和 getBoundingClientRect 两个方法能获取到详细的尺寸。

Method

getComputedStyle()

getComputedStyle() 获取的是元素 css 定义的属性，css 中是什么就返回什么，举个例子：

#wrapper{
    width:100px;
    height:100px;
    padding:10px;
    margin:4px;
    border:1px solid red;
}
console.log(document.querySelector('#wrapper').getComputedStyle().width)

输出的结果：250px

getBoundingClientRect()

getBoundingClientRect() 获取的是元素的位置信息：left、right、top、bottom 以及 width、height。

返回的 width = offsetWidth，height = offsetHeight。

标签：offsetWidth,100px,wrapper,height,width,client,offset,border,scroll
来源： https://www.cnblogs.com/yang1997/p/12194450.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9