offset 家族
1. 定位父级
定义：offsetParent 就是距离该元素最近的、进行过定位的元素；
根据定义还可分为以下几种情况：
-
元素自身有
fixed固定定位的，父级元素无定位或者有定位的，offsetParent是null；<div id="parent"> <div id="son" style="position: fixed"> </div> </div> <!-- JS --> <script> function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } var getParent = $("son").offsetParent; console.log(getParent); /* >>> getParent = null */ </script> -
元素自身无
fixed固定定位，父级也没有设置定位，offsetParent是body<div id="parent"> <div id="son" style="position: absolute"> </div> </div> <!-- JS --> <script> function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } var getParent = $("son").offsetParent; console.log(getParent); /* >>> getParent = <body>...</body> */ </script> -
元素自身无
fixed定位，上级元素中存在定位，offsetParent是最近的、有定位的元素;<div id="grandfather" style="position: relative"> <div id="parent"> <div id="son"> </div> </div> </div> <!-- JS --> <script> function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } var getParent = $("son").offsetParent; console.log(getParent); /* >>> getParent = <div id="grandfather" style="position: relative">...</div> */ </script> -
<body>...</body>的offsetParent属性值是null。
2. 偏移量
offsetTop
定义：获取该元素相对于页面最近的、设置有定位的父级元素(offsetParent)的顶部坐标位置值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偏移量</title>
<style>
#grandfather{
width: 500px;
height: 500px;
border: 5px orange solid;
position: relative;
}
#parent{
width: 300px;
height: 300px;
border: 5px salmon solid;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#son{
width: 100px;
height: 100px;
border: 10px solid seagreen;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="parent">
<div id="son"></div>
</div>
</div>
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var getLeft = $("son").offsetLeft;
console.log(getLeft);
/*
纯距离 不包含边框
>>> getLeft = 90
*/
</script>
</body>
</html>
offsetLeft
定义：获取该元素相对于页面最近的、设置有定位的父级元素(offsetParent)的左侧位置值：
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var getTop = $("son").offsetTop;
console.log(getTop);
/*
纯距离 不包含边框
>>> getTop = 90
*/
</script>
3. 宽度和高度
offsetWidht
定义：offsetWidht 为该元素可见区域的宽度。
元素的 offsetWidht = 盒子线宽 + 盒子宽度 + 盒子水平方向内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见宽度和高度</title>
<style>
#box{
width: 300px;
height: 50px;
padding: 20px;
border: 5px solid #17a2b8;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById("box");
var getWidth = box.offsetWidth;
console.log(getWidth);
/*
左右边框(5 *2 = 10px) + 宽度(300px) + 左右内边距(20 * 2 = 40px) = 350px
注意!!!这种方式返回的值是一个number，不会带px
>>> getWidth = 350
当然也可以用户另一种方法获取宽度，但是这种方法只能获取行内css的属性值
console.log(box.style.width);
>>> 350px
*/
</script>
</body>
</html>
offsetHeight
定义：offsetHeight 为该元素可见区域的高度。
offsetHeight = 盒子线宽 + 盒子高度 + 盒子垂直方向的内边距
<!-- HTML代码如上 -->
<script>
var box = document.getElementById("box");
var getHeight = box.offsetHeight;
console.log(getHeight);
/*
上下边框(5 * 2 =10px) + 高度(50px) + 上下内边距(20 * 2 = 40px) = 100px
>>> getHeight = 100
*/
</script>
相比于box.style.width，offsetWeight和offsetHeight只能读取宽高。
client 客户端
client 客户端大小指的是元素内容到内边距占据的空间大小。
宽度和高度
定义：clientWidht 为该元素可见区域的宽度。
元素的 clientWidht = 盒子宽度 + 盒子水平方向内边距
用这个方法可以获取<body></body>的宽度，会随着窗口的大小而改变。
clientWidth
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见宽度和高度</title>
<style>
#box{
width: 300px;
height: 50px;
padding: 20px;
border: 5px solid #17a2b8;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById("box");
var getWidth = box.clientWidth;
console.log(getHeight);
/*
宽度(300px) + 左右内边距(20 * 2 = 40px) = 340px
这种方法会返回一个数值类型
>>> getWidth = 340
*/
</script>
</body>
</html>
clientHeight
<!-- HTML代码同上获取宽度 -->
<script>
var box = document.getElementById("box");
var getHeight = box.clientHeight;
console.log(getHeight);
/*
高度(50px) + 左右内边距(20 * 2 = 40px) = 340px
这种方法会返回一个数值类型
>>> getHeight = 90
*/
</script>
边框大小
clientLeft
定义：客户端左边框的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取边框大小</title>
<style>
#box{
width: 100px;
height: 100px;
border: 10px solid orange;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script>
var box = document.getElementById("box");
var getBorder = box.clientLeft;
console.log(getBorder);
/*
返回的值是一个number
>>> getBorder = 10
*/
</script>
</html>
clientTop
定义：客户端上边框的大小
<!-- clientTop的用法同上clientLeft -->
注意：
- 所有client属性都是只读的；
- 如果给元素设置display：none; 属性，客户端client属性值为0；
- 尽量避免重复访问这些属性。
scroll 滚动页面
页面的宽度和高度
scrollHeight 和 scrollWidth
定义：表示网页元素的全部高度和全部宽度，包含由于滚动溢出而无法在网页上不可见的内容。
内容未溢出
当没有滚动条的时候，获取的值和clientHeight一样，只包含内边距和宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面的宽高</title>
<style>
#box{
width: 100px;
height: 200px;
padding: 5px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById("box");
var getHeight = box.scrollHeight;
console.log(getHeight);
/*
>>> getHeight = 210
*/
</script>
</body>
</html>
内容溢出
当内容溢出的时候，不管盒子是否设置 overflow: hidden 隐藏或 overflow: scroll 都会按照全部高度计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面的宽高</title>
<style>
#box{
width: 100px;
height: 200px;
padding: 5px;
border: 1px solid orange;
overflow: hidden;
}
</style>
</head>
<body>
<div id="box">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<script>
var box = document.getElementById("box");
var getHeight = box.scrollHeight;
console.log(getHeight);
/*
>>> getHeight = 482
*/
</script>
</body>
</html>
页面被卷起
scrollTop 和 scrollWidth
定义：页面被卷起的高度和宽度，scrollTop 和 scrollWidth 的值是可写的。
未滚动时s
当元素没有被滚动的时候，scrollTop 的值为零。
滚动
当页面被滚动时，scrollTop 为滚动的数量值
页面被滚动到底部时，符合以下公式：
scrollHeight = clientHeight + scrollTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面的宽高</title>
<style>
#box{
width: 100px;
height: 200px;
padding: 5px;
border: 1px solid orange;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<script>
var box = document.getElementById("box");
var getTop = box.scrollTop;
console.log(getTop);
/*
>>> getTop = 0
注意：页面初始化默认为未滚动 scrollTop初始值为零
因此需要配合一个事件来使用
*/
// 滚动事件
box.onscroll = function () {
console.log(box.scrollTop);
}
</script>
</body>
</html>
