欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

092_元素的几种宽度和高度

发布时间：2025/5/22 35 豆豆
生活随笔 收集整理的这篇文章主要介绍了 092_元素的几种宽度和高度 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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)。

4.3. 语法: element.offsetLeft。

5. offsetTop属性

5.1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点顶部边界的偏移像素值。

5.2. 元素顶部偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的顶部内边距(padding)。

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;/*padding: 10px;*//*position: relative;*/}#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)。<br />3. 语法: element.offsetLeft。<h2>offsetTop属性</h2>1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点顶部边界的偏移像素值。<br />2. 元素顶部偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的顶部内边距(padding)。<br />3. 语法: element.offsetTop。</div></div><script type="text/javascript">// Chrome滚动条的宽度是17var 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 />");var rect = d.getBoundingClientRect();document.write("x: " + rect.x + "<br />");document.write("y: " + rect.y + "<br />");document.write("left: " + rect.left + "<br />");document.write("right: " + rect.right + "<br />");document.write("top: " + rect.top + "<br />");document.write("bottom: " + rect.bottom + "<br />");document.write("width: " + rect.width + "<br />");document.write("height: " + rect.height + "<br />");</script></body> </html>

14.2. 效果图

总结

以上是生活随笔为你收集整理的092_元素的几种宽度和高度的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。