client
client 客户端大小 指的是元素内容到内边距占据的空间大小
clientWidthwidth + 左右paddingclientHeightheight + 上下paddingclientLeft左边框大小clientTop上边框大小
<body>
<div id="box" style="width: 200px;height: 200px;border: 1px solid red;padding: 20px;">
</div>
<script type="text/javascript">
var box = document.getElementById('box')
console.log(box.clientWidth, box.clientHeight);
console.log(box.clientTop, box.clientLeft);
//获取页面元素大小
console.log(document.documentElement.clientHeight)
console.log(document.documentElement.clientWidth)
//注意
//所有client属性是只读的 静态失败
//如果给元素设置display:none 客户端client属性都为0
//尽量避免重复访问这些属性 在外部进行获取 在内部去赋值
//节省时间！！！！！
console.time('time');
var b = box.clientHeight;
for (var i = 0; i < 100000; i++) {
// var a = box.clientHeight;
var a = b
}
console.timeEnd('time')
</script>
</body>
offset
- 定位父级
offsetParent
<body>
<!-- 1.元素自身有fixed定位 offsetParent是null -->
<div id="box" style="position: fixed;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box.offsetParent);
</script>
</body>
<body>
<!-- 2.元素自身无fixed定位,offsetParent是body -->
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box.offsetParent);
</script>
</body>
<body>
<!-- 3.元素自身无定位,父级元素存在定位,offsetParent 是以最近的经过定位的父级元素 -->
<div id="father" style="position:relative;">
<div id="box"></div>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box.offsetParent);
</script>
</body>
offsetWidth和offsetHeight
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="box" style="width: 100px;"></div>
<script type="text/javascript">
// offsetWidth 所有内容的宽度 内边距 边框等
var box = document.getElementById('box')
console.log(box.offsetWidth)
console.log(box.offsetHeight)
// 只能获得盒子行内的属性 获得的是字符串！！
console.log(box.style.width, box.style.height)
//box.offsetWidth = 500; 是不可以的
// 因为 offsetWidth 和offsetHeigh 他们是只读的
box.style.width = 500 + 'px'
</script>
</body>
</html>
offsetTop和offsetLeft
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#father {
width: 400px;
height: 400px;
background-color: red;
}
#son {
width: 200px;
height: 200px;
background-color: aqua;
margin-left: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<script type="text/javascript">
//1.offsetTop 当前元素上边框到offsetParent元素的上边框的橘里
var son = document.getElementById('son');
console.log(son.offsetParent)
//当设置边框粗细时offsetLeft当盒子最左端到Parent左边框的距离
console.log(son.offsetTop, son.offsetLeft)
</script>
</body>
</html>
scroll
scrollHeight和scrollWidth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<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 type="text/javascript">
//1.scrollHeight 表示元素的总高度，包含由于溢出而无法在网页上的不可见部分
//2.scrollWidth表示元素的总宽度，包含由于溢出而无法在网页上的不可见部分
var box = document.getElementById('box')
//1.无滚动条时候,scrollHeight跟clientHeight属性结果是相等的
// console.log(box.scrollHeight);
// console.log(box.scrollWidth);
//2.有滚动条的时候
console.log(box.scrollHeight);
console.log(box.scrollWidth);
</script>
</body>
</html>
scrollTop和scrollLeft
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<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>
<button id="btn1"> 向下滚动</button>
<script type="text/javascript">
var box = document.getElementById('box')
var btn1 = document.getElementById('btn1')
//1.scrollTop 元素被卷起的高度 滚动的时候上方被卷起的高度
box.onscroll = function() {
console.log(box.scrollTop)
//当滚动条 滚动到内容底部时，符合以下公式
//scrollHeight = clientHeight + scrollTop
}
box.scrollTop = 10;
//scrollTop 是可读写的
console.log(box.scrollTop);
btn1.onclick = function() {
box.scrollTop += 10;
}
</script>
</body>
</html>
小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
overflow: scroll;
}
#btn {
position: fixed;
top: 200px;
left: 30px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="box">
<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>
<button id="btn">回到顶部</button>
<script type="text/javascript">
window.onscroll = function() {
// console.log(document.documentElement.scrollTop)
// console.log(document.body.scrollTop)
//兼容代码 浏览器不同 上面两个可能会失效
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(docScrollTop)
var btn = document.getElementById('btn')
btn.onclick = function() {
if (docScrollTop) {
document.documentElement.scrollTop = document.body.scrollTop = 0
}
}
}
</script>
</body>
</html>
