javascript client， offset，scroll系列介绍
一.client系列
1.获取元素可视高宽: 元素.clientHeight 元素.clientWidth
<style>
.box {
width: 100px;
height: 100px;
background-color: #0099cc;
margin: 100px auto;
padding: 20px;
border: 2px solid #0099cc;
}
</style>
<script>
let box = document.getElementsByClassName('box')[0]
let clientH = box.clientHeight
let chientW = box.clientWidth
console.log('可视高度', clientH)
console.log('可视宽度', chientW)
</script>
页面输出：
注：元素的可视高宽包括 width+height +padding
2.获取屏幕的可视高宽
获取屏幕可视高度： document.documentElement.clientHeight
获取屏幕可视宽度： document.documentElement.clientWidth
3.元素距离边框的位置 top/left
<style>
.box {
width: 100px;
height: 100px;
background-color: #0099cc;
margin: 100px auto;
padding: 20px;
border: 12px solid #0099cc;
}
</style>
<script>
let box = document.getElementsByClassName('box')[0]
let clientTop = box.clientTop
let chientLeft = box.clientLeft
console.log(clientTop, chientLeft)
</script>
border 为12 px
输出结果：
二.offset 系列
1.获取元素占位高宽 元素.offsetWidth 元素offsetHeight
<style>
.box {
width: 100px;
height: 100px;
background-color: #0099cc;
margin: 100px auto;
padding: 20px;
border: 12px solid #0099cc;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
let box = document.getElementsByClassName('box')[0]
let offsetW = box.offsetWidth
let offsetH = box.offsetHeight
console.log(offsetW, offsetH)
</script>
</body>
输出结果：
注：元素实际占位高宽包括 width+height +border
2.offsetTop/offsetLeft获取元素距离相对位置父元素上边框/左边框的距离 (没有父元素默认body)
<style>
.box {
width: 100px;
height: 100px;
background-color: #0099cc;
margin: 100px auto;
padding: 20px;
border: 12px solid #0099cc;
position: relative;
}
.box div {
width: 30px;
height: 30px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
<script>
let box = document.getElementsByClassName('child')[0]
let offsetT = box.offsetTop
let offsetL = box.offsetLeft
console.log('距离父级上边框位置----' + offsetT + '---', '距离父级左边框位置----' + offsetL + '----')
</script>
注：offsetTop/offsetLeft获取的是相当父元素上/左边框位置 父元素设置relative 子元素设置absolute 若没有父元素 或者父元素没有设置相对定位 则相对于body
三.scroll系列
1.元素.scrollWidth 元素.scrollHeight
<style>
.box {
width: 100px;
height: 100px;
background-color: #0099cc;
margin: 100px auto;
padding: 20px;
border: 12px solid #0099cc;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
<script>
let box = document.getElementsByClassName('box')[0]
let scrollW = box.scrollWidth
let scrollH = box.scrollHeight
console.log('元素实际宽度----' + scrollW + '---', '元素实际高度----' + scrollH + '----')
</script>
</body>
注: scroll获取元素实际高宽 width+height+padding
将元素 设置为IE 盒模型时 box-sizing: border-box;
<style>
.box {
width: 100px;
height: 100px;
background-color: #0099cc;
margin: 100px auto;
padding: 20px;
border: 12px solid #0099cc;
position: relative;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
<script>
let box = document.getElementsByClassName('box')[0]
let scrollW = box.scrollWidth
let scrollH = box.scrollHeight
console.log('元素实际宽度----' + scrollW + '---', '元素实际高度----' + scrollH + '----')
</script>
</body>
将元素设置了box-sizing:border-box 时 会将border和padding计算为宽度内容
2.scrollTop/scrollLeft 元素被卷去的高宽
页面被卷去的高度：document.documentElement.scrollTop
页面被卷去的宽度: document.documentElement.scrollLeft
元素.scrollTop : 被卷去的高
元素.scrollLeft:被卷去的宽