页面尺寸事件
- 会在窗口尺寸改变的时候触发事件
resize
- 检测屏幕宽度
- 获取宽高
- 获取元素的可见部分宽高（不包含边框、margin、滚动条等），即：
clientWidth和clientHeight
<!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>
div {
width: 200px;
height: 200px;
background-color: gold;
padding: 10px;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
console.log(div.clientWidth)
// resize 浏览器窗口大小发生变化
window.addEventListener('resize', function () {
console.log('hhh')
})
</script>
</body>
</html>
元素尺寸于位置
- 使用场景：
- 页面滚动到某个元素就可以做某事
- 简单来说，是通过js的方式，得到
尺寸
-
获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight- 获取出来的是数值，方便计算
- 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
-
获取位置：
- 获取元素距离自己父级元素的左、上距离（没有的话以文档左上角为准）
offsetLeft和offsetTop是属性
<style>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<div>
</div>
<script>
const div = document.querySelector('div')
console.log(div.offsetLeft)
</script>
</body>
加入一个子元素p，当父元素无定位时：
<!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>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
p {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
const div = document.querySelector('div')
const p = document.querySelector('p')
//最近一级有定位的祖先元素
console.log(p.offsetLeft)
</script>
</body>
</html>
当父元素有定位时：
div {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}