client系列
clientWidth, clientHeight
对于内联元素, 其clientWidth
和clientHeight
属性值为 0
clientWidth和
clientHeight的值会被四舍五入为一个整数
Element.clientWidth
属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距 Element.clientHeight
属性同上
clientWidth = contentWidth + paddingWidth * 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
width: 100px;
height: 100px;
margin: 50px;
border: 45px solid red;
padding: 10px;
background-color: green;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById('box');
console.log(box.clientWidth); // => 120
console.log(box.clientHeight); // => 120
</script>
</body>
</html>
clientTop, clientLeft
容器上边框和左边框的宽度值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
width: 100px;
height: 100px;
margin: 50px;
border: 45px solid red;
padding: 10px;
background-color: green;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById('box');
console.log(box.clientLeft); // => 45
console.log(box.clientTop); // => 45
</script>
</body>
</html>
offset系列
offsetParent
Element.offsetParent返回一个指向最近的(只包含层级的最近)包含该元素的定位元素或者最近的
table, td, th, body元素, 当元素的
style.display设置为
none时,
offsetParent返回为
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
width: 100px;
height: 100px;
margin: 50px;
border: 45px solid red;
padding: 10px;
background-color: green;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.getElementById('box');
console.log(box.offsetParent); // => body元素
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
width: 100px;
height: 100px;
margin: 50px;
border: 45px solid red;
padding: 10px;
background-color: green;
position: relative;
}
#child {
width: 50px;
height: 50px;
margin: 50px;
border: 45px solid red;
padding: 10px;
background-color: green;
}
</style>
</head>
<body>
<div id="box">
<div id="child"></div>
</div>
<script>
var child = document.getElementById('child');
console.log(child.offsetParent); // => box元素
</script>
</body>
</html>
offsetWidth 和 offsetHeight
分别表示元素的布局宽度和布局高度,是由 元素的边框、 元素的padding, 滚动条的宽度(如果存在的话)以及CSS设置的宽度
该属性值会被四舍五入为一个整数
offsetWidth = contentWidth + padding * 2 + border * 2 = clientWidth + border * 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
position: relative;
width: 300px;
height: 300px;
background-color: red;
overflow: hidden;
margin: 50px;
}
#child {
width: 100px;
height: 100px;
background-color: blue;
margin: 30px;
border: 10px solid yellow;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
</div>
<script>
var child = document.getElementById('child');
console.log(child.offsetWidth); // => 140
console.log(child.offsetHeight); // => 140
</script>
</body>
</html>
offsetTop 和 offsetLeft
分别返回当前元素相对于其offsetParent
元素的顶部和左侧内边距的距离
该属性值会被四舍五入为一个整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
position: relative;
width: 300px;
height: 300px;
background-color: red;
overflow: hidden;
margin: 50px;
}
#child {
width: 100px;
height: 100px;
background-color: blue;
margin: 30px;
border: 10px solid yellow;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
</div>
<script>
var box = document.getElementById('box');
console.log(box.offsetTop); // => 50,父级没有定位,相对body
console.log(box.offsetLeft); // => 50,父级没有定位,相对body
var child = document.getElementById('child');
console.log(child.offsetTop); // => 30,父级有定位,相对box
console.log(child.offsetLeft); // => 30,父级有定位,相对box
</script>
</body>
</html>
scroll系列
scrollWidth 和 scrollHeight
分别返回元素内容的宽度和高度,包括由于overflow
溢出而在屏幕上不可见的内容, 当内容宽度小于元素宽度的时候,返回值同clientWidth
和clientHeight
scrollTop 和 scrollLeft
该属性可以获取和设置
一个元素的内容的垂直滚动或水平滚动的像素数, 当没有产生滚动条时,这两个属性的值都为 0
-
如果一个元素不能被滚动(比如:元素没有溢出),则他们将被设置为 0
-
如果设置的值 小于0,则他们的值会被设置为 0
-
如果设置了超出这个容器可滚动的值,则他们将被设置为最大值
-
该属性值会被四舍五入为一个整数
-
scrollTop和scrollLeft的值仅在存在滚动条的元素上有效,否则他们的值恒定为0
getBoundingClientRect
Element.getBoundingClientRect()
方法返回Element
元素的大小及其相对视口的位置
x, y
是该元素左上角相对于浏览器视口左上角
的坐标
bottom, left,right, top
是该元素相对于浏览器视口左上角
的距离
width, height
是该元素的宽度和高度