大家好，又见面了，我是你们的朋友全栈君。
文章目录
前言
前端学习中会遇到的一些宽高度，位置的计算
提示：以下是本篇文章正文内容，下面案例可供参考
.box {
width: 100px;
height: 100px;
border: 20px solid #333;
padding: 20px;
margin: 20px;
}
一、clientWidth / clientHeight
是内容区域的宽高，不包括边框宽高度。
console.log(oBox.clientWidth) // 120
对于浏览器窗口或body:
则是可视宽高
console.log(document.documentElement.clientWidth);
console.log(document.body.clientWidth);
值会根据浏览器窗口大小的变化而变化
二、clientLeft / clientTop
取决于元素的左边框、上边框的值
console.log(oBox.clientTop); // 20
三、clientX / clientY
鼠标位置距离当前浏览器窗口可视区域的x，y坐标
document.documentElement.onclick = function(e) {
console.log('clientX:' + e.clientX);
console.log('clientY:' + e.clientY);
}
四、scrollWidth / scrollHeight
内容的实际宽高，包括有滚动条隐藏的部分
<style>
body {
width: 2000px;
height: 2000px;
}
</style>
<script>
console.log(document.documentElement.scrollWidth);
console.log(document.documentElement.scrollHeight)
</script>
对于普通元素，scrollWidth、scrollHeight就是内容的实际宽高，不包括边框
console.log(oBox.scrollWidth); // 140
console.log(oBox.scrollHeight) // 140
五、scrollLeft / scrollTop
页面被卷去的宽度、高度，实际就是元素有滚动条的情况下滚动的大小
<style>
body {
width: 2000px;
height: 2000px;
}
</style>
<script>
window.onscroll = function() {
console.log(document.documentElement.scrollLeft);
console.log(document.documentElement.scrollTop);
}
</script>
可读，可写
六、offsetWidth / offsetHeight
元素的宽高，包含内边距和边框
console.log(oBox.offsetWidth) // 180
七、offsetLeft / offsetTop
距离最近的具有参照物的元素左边和上边的距离
给oBox加个父级参照物oBig：
<style>
.box {
width: 100px;
height: 100px;
border-top: 40px solid #333;
border-left: 20px solid #333;
padding-top: 40px;
padding-left: 20px;
margin-top: 40px;
margin-left: 20px;
position: absolute;
left: 0;
top: 0;
}
.big {
width: 500px;
height: 300px;
position: relative;
margin-top: 40px;
margin-left: 20px;
border-top: 40px solid #333;
border-left: 20px solid #333;
}
</style>
<script>
window.onscroll = function() {
console.log('left:' + oBox.offsetLeft);
console.log('top:' + oBox.offsetTop);
}
</script>
八、offsetX / offsetY
鼠标位置相对于事件源的X、Y坐标
<style>
.box{
width: 200px;
height: 200px;
margin: 100px;
background-color: #f00;
}
</style>
<script>
oBox.onmousemove = function(e){
console.log(e.offsetX)
}
</script>
九、pageX / pageY
鼠标相对于文档的X、Y坐标，这2个属性不是标准属性，但得到了广泛的支持
与clientX、clientY有所不同：
document.documentElement.onclick = function(e) {
console.log('clientX: ' + e.clientX);
console.log('pageX: ' + e.pageX)
}
注意，这里页面有横向滚动条，clientX是距离窗口可视的距离，而pageX是距离文档的距离
总结
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/163052.html原文链接：https://javaforall.net
