js中offset系列、client系列、scroll系列和screen系列详解
原创js中offset系列、client系列、scroll系列和screen系列详解
原创
1. offset系列
element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + border值；
<body>
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 200px;
height: 200px;
padding: 10px;
border: 5px solid #000;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
margin-left: 50px;
border: 5px solid #000;
background-color: blue;
}
</style>
<script>
const son = document.querySelector(".son");
console.log(son.offsetTop); // 10
console.log(son.offsetLeft); // 60
console.log(son.offsetWidth); // 130 width + 2 * padding + borde
console.log(son.offsetHeight); // 130 height + 2 * padding + borde
</script>
</body>2. client系列
element.clientTop: 返回元素上边框的长度； element.clientLeft: 返回元素左边框的长度； element.clientWidth: 返回元素大小(宽度)，不包含边框，width + padding； element.clientHeight: 返回元素大小(高度)，不包含边框，height + padding；
<body>
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 200px;
height: 200px;
padding: 10px;
border: 5px solid #000;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
margin-left: 50px;
border: 5px solid #000;
background-color: blue;
}
</style>
<script>
const son = document.querySelector(".son");
console.log(son.clientTop); // 5
console.log(son.clientLeft); // 5
console.log(son.clientWidth); // 120 width + 2 * padding
console.log(son.clientHeight); // 120 height + 2 * padding
</script>
</body>3. scroll系列
element.scrollTop: 返回被卷去的上侧距离(页面纵向滚动，滚动条拉动的距离)；
element.scrollLeft: 返回被卷去的左侧距离(页面横向滚动，滚动条拉动的距离)；
onscroll事件: 页面滚动事件，当页面滚动的时候会监听这个事件；
<body>
<div class="son"></div>
<div class="son1"></div>
<style>
.son {
width: 100px;
height: 100px;
padding: 10px;
margin-left: 50px;
border: 5px solid #000;
background-color: blue;
overflow: auto;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
margin-left: 50px;
border: 5px solid #000;
background-color: blue;
overflow: auto;
}
</style>
<script>
const son = document.querySelector(".son");
const son1 = document.querySelector(".son1");
son.addEventListener("scroll", () => {
console.log(son.scrollTop);
})
son1.addEventListener("scroll", () => {
console.log(son.scrollLeft);
})
</script>
</body>element.scrollWidth: 返回元素大小(宽度)，不包含边框，width + padding，注意这个宽度指的是内容实际大小，内容如果超出也要算在内；
element.scrollHeight: 返回元素大小(高度)，不包含边框，height + padding，注意这个高度指的是实际大小，内容如果超出也要算在内；
代码如下：
<body>
<div class="son">hellohellohellohellohellohellohello</div>
<div class="son1">
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
</div>
<style>
.son {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid #000;
background-color: blue;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
margin-top: 50px;
border: 5px solid #000;
background-color: pink;
}
</style>
<script>
const son = document.querySelector(".son");
const son1 = document.querySelector(".son1");
console.log(son1.scrollWidth);
console.log(son2.scrollHeight);
</script>
</body>4. screen系列
window.screenTop: 表示窗口相对于电脑屏幕顶部的位置；
window.screenLeft: 表示窗口相对于电脑屏幕左侧的位置；
window.screen.width: 电脑屏幕分辨率的宽；
window.screen.height: 屏幕分辨率的高。
console.log(window.screenTop);
console.log(window.screenLeft);
console.log(window.screen.width);
console.log(window.screen.height);
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
