文章目錄
- 前言
- 一、clientWidth / clientHeight
- 二、clientLeft / clientTop
- 三、clientX / clientY
- 四、scrollWidth / scrollHeight
- 五、scrollLeft / scrollTop
- 六、offsetWidth / offsetHeight
- 七、offsetLeft / offsetTop
- 八、offsetX / offsetY
- 總結
前言
前端學習中會遇到的一些寬高度，位置的計算
提示：以下是本篇文章正文內容，下面案例可供參考
.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>
總結
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254965.html
標籤：其他
上一篇：Vue創建組件詳解