文章目录
前言
经常碰到offset、scroll、client这几个关键字,每次都要各种实验,这里总结一下。
一、offset
html代码:
<div id="parent">
<div id="child"></div>
</div>
css代码:
#parent {
margin-left: 100px;
width: 500px;
height: 500px;
border: 10px solid salmon;
}
#child {
margin-left: 60px;
width: 200px;
height: 200px;
padding: 10px;
border: 15px solid green;
background-color: aquamarine;
}
js代码:
var parent = document.getElementById('parent');
var child = document.getElementById('child');
1.offsetWidth
获取元素的宽度。
offsetWidth:width + 左右padding + 左右border
console.log(child.offsetWidth);
2.offsetHeight
获取元素的高度。
offsetHeight:height + 上下padding + 上下border
console.log(child.offsetHeight);
3.offsetLeft
如果父元素没有定位,获取距离浏览器最左侧的距离。
如果父元素有定位,获取距离父元素最左侧的距离。
console.log(child.offsetLeft);
4.offsetTop
如果父元素没有定位,获取距离浏览器最上侧的距离。
如果父元素有定位,获取距离父元素最上侧的距离。
console.log(child.offsetTop);
二、client
1.clientWidth
获取可视范围的宽度。
当盒子内部存在滚动条时,获得的宽度不包括滚动条。
clientWidth:width + 左右padding
console.log(child.clientWidth);
2.clientHeight
获取可视范围的高度。
当盒子内部存在滚动条时,获得的高度不包括滚动条。
clientHeight:height + 上下padding
console.log(child.clientHeight);
3.clientLeft
获得左边框的宽度。
console.log(child.clientLeft);
4.clientTop
获取上边框的高度。
console.log(child.clientTop);
三、scroll
html代码:
<div id="outer">
<div id="inner">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
css代码:
#outer {
margin-top: 100px;
width: 300px;
height: 200px;
background-color: aquamarine;
overflow: auto;
}
#inner {
width: 400px;
height: 500px;
}
js代码:
var outer = document.getElementById('outer')
1.scrollWidth
获得元素的实际宽度。
在内容没有超出盒子时,获得的是盒子的内部宽度。
内容超出盒子时,获得的是内容实际应有的宽度。
当盒子内部存在滚动条时,获得的宽度不包括滚动条。
scrollWidth:width + 滚动条滚动距离
console.log(outer.scrollWidth);
2.scrollHeight
获取可视范围的高度。
在内容没有超出盒子时,获得的是盒子的内部高度。
内容超出盒子时,获得的是内容实际应有的高度。
当盒子内部存在滚动条时,获得的高度不包括滚动条。
scrollHeight:height + 滚动条滚动距离
console.log(outer.scrollHeight);
3.scrollLeft
获得的是内容卷曲出去的宽度。
当滚动条向右拉时,内容往左走,获得的就是右面跑出盒子范围的那部分宽度。
console.log(outer.scrollLeft);
4.scrollTop
获得的是内容卷曲出去的高度。
当滚动条向下拉时,内容往上走,获得的就是上面跑出盒子范围的那部分高度。
console.log(outer.scrollTop);
总结
以上就是今天的内容。