DOM尺寸，DOM元素位置
程序员文章站
2022-06-15 13:52:47
...
DOM尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./utils.js"></script>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
height: 200px;
background: red;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<!-- <p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p> -->
</div>
<script>
// 以一个方向为例，每一种都有宽和高一对
var box = document.querySelector('.box')
var width = getStyle(box, 'width')
console.log(width)
// offsetWidth 得到的是数字，px帮我们去掉了
// 包含padding、border,不包含margin
var width1 = box.offsetWidth // DOM提供的一个属性，用来获取元素占位尺寸，在文档流中所占的大小
console.log(width1)
// clientWidth就是在offsetWidth的基础上减去border
var width2 = box.clientWidth
console.log(width2)
// 一般都是纵向滚动条，所以以高度为例
// 获取的是可滚动内容的总高度，如果box没有滚动条，跟clientHeight是一样的
// 内容超出的时候获取的总内容高度
// 不包含边框的
var height = box.scrollHeight
console.log(height)
// 这三对属性都只是用来获取，不能设置
// box.offsetWidth = 400 // 这一句不会报错，但是也不会生效
// 如果要修改元素尺寸，还是用样式来修改，带单位的字符串
box.style.width = '300px'
</script>
</body>
</html>
DOM元素位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
height: 200px;
background: red;
overflow: auto;
}
.container {
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
</div>
</div>
<script>
var box = document.querySelector('.box')
// 获取的是元素加边框前后的偏移量，也就是左边框的宽度
// clientTop 就是上边框的宽度
console.log(box.clientLeft)
// offsetParent指的是最近的有定位属性的祖先级，如果都没有定位，得到body
// offsetLeft获取的就是相对于offsetParent的坐标
// 如果box有绝对定位的话，那么offsetLeft就和定位坐标left的值一样
console.log(box.offsetLeft)
// console.log(box.scrollTop) // 在这里直接获取永远都是0
// 当滚轮开始滚动的时候来获取
box.onscroll = function (){
console.log(box.scrollTop)
}
// 让滚轮默认在元素底部，可以给scrollTop赋值
// 滚动内容总高度 - 盒子本身高度可以让滚动条在最底部
box.scrollTop = box.scrollHeight - box.clientHeight // 让滚动条在最底部的公式
</script>
</body>
</html>