096_元素的几种宽度和高度
作者：互联网
1. offsetWidth属性
1.1. offsetWidth属性是一个只读属性, 它返回该元素的像素宽度, 宽度包含内边距(padding)、边框(border)和元素的垂直滚动条, 不包含外边距(margin), 是一个整数, 单位是像素px。
1.2. 语法: element.offsetWidth。
2. offsetHeight属性
2.1. offsetHeight属性是一个只读属性, 它返回该元素的像素高度, 高度包含内边距(padding)、边框(border)和元素的水平滚动条, 不包含外边距(margin), 是一个整数, 单位是像素px。
2.2. 语法: element.offsetHeight。
3. offsetParent属性
3.1. offsetParent是一个只读属性, 获得被定位的最近祖先元素。
3.2. 注意: offsetParent用于offsetLeft和offsetTop属性。
3.3. 语法: element.offsetParent。
4. offsetLeft属性
4.1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点左边界的偏移像素值。
4.2. 元素向左偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的左侧内边距(padding)、边框(border)及垂直滚动条。
4.3. 语法: element.offsetLeft。
5. offsetTop属性
5.1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点顶部边界的偏移像素值。
5.2. 元素顶部偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的顶部内边距(padding)、边框(border)及水平滚动条。
5.3. 语法: element.offsetTop。
6. clientWidth属性
6.1. clientWidth属性是一个只读属性, 它返回该元素的像素宽度, 宽度包含内边距(padding), 不包含边框(border), 外边距(margin)和垂直滚动条, 是一个整数, 单位是像素px。
6.2. 内联元素以及没有CSS样式的元素的clientWidth属性值为0。
6.3. 语法: element.clientWidth。
7. clientHeight属性
7.1. clientHeight属性是一个只读属性, 它返回该元素的像素高度, 高度包含内边距(padding), 不包含边框(border), 外边距(margin)和水平滚动条, 是一个整数, 单位是像素px。
7.2. 语法: element.clientHeight。
8. clientLeft属性
8.1. clientLeft属性是一个只读属性, 表示一个元素的左边框的宽度, 以像素表示。如果元素的文本方向是从右向左(RTL, right-to-left), 并且由于内容溢出导致左边出现了一个垂直滚动条, 则该属性包括滚动条的宽度。
8.2. 语法: element.clientLeft。
9. clientTop属性
9.1. clientTop属性是一个只读属性, 表示一个元素的顶部边框的宽度, 以像素表示。
9.2. 语法: element.clientTop。
10. scrollHeight属性
10.1. offsetHeight属性是一个只读属性, 它返回该元素的像素高度, 高度包含内边距(padding), 不包含外边距(margin)、边框(border), 是一个整数, 单位是像素px。
10.2. 语法: element.scrollHeight。
11. scrollWidth属性
11.1. scrollWidth属性是一个只读属性, 它返回该元素的像素宽度, 宽度包含内边距(padding), 不包含外边距(margin)、边框(border), 是一个整数, 单位是像素px。
11.2. 语法: element.scrollWidth。
12. scrollLeft属性
12.1. 返回当前视图中的实际元素的左边缘和左边缘之间的距离。
12.2. 语法: element.scrollLeft。
13. scrollTop属性
13.1. 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离。
13.2. 语法: element.scrollTop。
14. 例子
14.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clientWidth-clientHeight-clientLeft-clientTop和offsetWidth-offsetHeight-offsetLeft-offsetTop和scrollWidth-scrollHeight-scrollLeft-scrollTop属性</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#pDiv {
width: 400px;
height: 400px;
margin: 30px;
border: solid 10px;
}
#myDiv {
width: 200px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
border: solid 10px;
padding: 30px;
/*auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容。*/
overflow: auto;
/*nowrap并所有的空白符, 忽略换行符, 并且不允许自动换行。*/
white-space: nowrap;
/*direction: rtl;*/
}
</style>
</head>
<body>
<div id="pDiv">
<div id="myDiv">
<h2>offsetWidth属性</h2>
1. offsetWidth属性是一个只读属性, 它返回该元素的像素宽度, 宽度包含内边距(padding)、边框(border)和元素的垂直滚动条, 不包含外边距(margin), 是一个整数, 单位是像素px。<br />
2. 语法: element.offsetWidth。
<h2>offsetHeight属性</h2>
1. offsetHeight属性是一个只读属性, 它返回该元素的像素高度, 高度包含内边距(padding)、边框(border)和元素的水平滚动条, 不包含外边距(margin), 是一个整数, 单位是像素px。<br />
2. 语法: element.offsetHeight。
<h2>offsetParent属性</h2>
1. offsetParent是一个只读属性, 获得被定位的最近祖先元素。<br />
2. 注意: offsetParent用于offsetLeft和offsetTop属性。<br />
3. 语法: element.offsetParent。
<h2>offsetLeft属性</h2>
1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点左边界的偏移像素值。<br />
2. 元素向左偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的左侧内边距(padding)、边框(border)及垂直滚动条。<br />
3. 语法: element.offsetLeft。
<h2>offsetTop属性</h2>
1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点顶部边界的偏移像素值。<br />
2. 元素顶部偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的顶部内边距(padding)、边框(border)及水平滚动条。<br />
3. 语法: element.offsetTop。
</div>
</div>
<script type="text/javascript">
// Chrome滚动条的宽度是17
var d = document.querySelector("#myDiv");
document.write("clientWidth: " + d.clientWidth + " clientHeight: " + d.clientHeight + " clientLeft: " + d.clientLeft + " clientTop: " + d.clientTop + "<br />");
document.write("offsetWidth: " + d.offsetWidth + " offsetHeight: " + d.offsetHeight + " offsetLeft: " + d.offsetLeft + " offsetTop: " + d.offsetTop + "<br />");
d.scrollLeft += 30;
d.scrollTop += 50;
document.write("scrollWidth: " + d.scrollWidth + " scrollHeight: " + d.scrollHeight + " scrollLeft: " + d.scrollLeft + " scrollTop: " + d.scrollTop + "<br />");
</script>
</body>
</html>14.2. 效果图
标签：offsetParent,元素,096,像素,宽度,element,几种,margin,属性 来源： https://blog.csdn.net/aihiao/article/details/120683017