<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
div {
width:200px;
height:200px;
border:5px solid red;
background:yellow;
padding:10px;
margin:20px;
overflow: auto;
}
</style>
</head>
<body>
<div id="dv">
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
<p>##########</p>
</div>
<script>
var dv = document.getElementById("dv");
// clientWidth
// clientHeight
// 可视部分的宽度和高度, content + padding
// 如果出现滚动条, 会覆盖元素宽高, 减去滚动条的宽高
// console.log(dv.clientWidth);
// console.log(dv.clientHeight);
// 200 10 5
// content + padding + border
// console.log(dv.offsetWidth);
// console.log(dv.offsetHeight) /*
这个属性指的就是读取元素border的宽度和高度
*/
console.log(dv.clientLeft);
console.log(dv.clientTop);
</script>
</body>
</html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father {
width: 500px;
height: 500px;
background-color: red;
position: relative;
margin: 0 auto;
}
#son {
width: 100px;
height: 100px;
background-color: lightpink;
position: absolute;
margin-left: 100px;
left: 100px;
margin-top: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<script>
let son = document.getElementById('son');
// 获得定位元素与父元素顶部的距离,以及左边的距离
// 定位元素在父元素中的水平与垂直位置
console.log(son.offsetLeft);
console.log(son.offsetTop);
</script>
</body>
</html>
<!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;
height: 200px;
border: 2px solid red;
overflow: auto;
/* 自适应内容,添加滚动条 */
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div id="box">
<img src="./1.jpg" alt="">
</div>
<script>
// 如何监测目标元素的滚动
let box = document.getElementById('box');
// 滚动事件
box.onscroll = function () {
// 请实时打印水平与垂直方向的滚动距离
// console.log('垂直滚动的距离是:'+box.scrollTop);
// console.log('水平滚动的距离是:'+box.scrollLeft);
// console.log('------------------------');
if (box.scrollTop >= 100) {
// 你不是神,怎么刚好调用的时候就是100
alert('我吓死你');
}
}
</script>
</body>