093_Element.getBoundingClientRect()方法和DOMRect对象

最新推荐文章于 2024-06-06 17:32:34 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-06-06 17:32:34 发布

阅读量1.1k

点赞数

分类专栏： JavaScript学习文章标签： javascript ecmascript 前端

本文链接：https://blog.csdn.net/aihiao/article/details/121412402

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. Element.getBoundingClientRect()

1.1. Element.getBoundingClientRect()方法返回值是一个DOMRect对象, 对象拥有left, top, right, bottom, x, y, width和height这几个以像素为单位的只读属性, 用于描述整个边框。除了width和height以外的属性是相对于视图窗口的左上角来计算的。

2. DOMRect对象

2.1. 一个DOMRect代表一个矩形。DOMRect从其父类DOMRectReadOnly继承属性, 不同之处在于它们不再是只读的。

2.2. DOMRectReadOnly.x, 返回DOMRect矩形原点的x坐标。

2.3. DOMRectReadOnly.y, 返回DOMRect矩形原点的y坐标。

2.4. DOMRectReadOnly.width, 返回DOMRect矩形的宽度。

2.5. DOMRectReadOnly.height, 返回DOMRect矩形的高度。

2.6. DOMRectReadOnly.top, 返回DOMRect的顶坐标值(与y具有相同的值, 如果height为负值, 则为y + height的值)。

2.7. DOMRectReadOnly.right, 返回DOMRect的右坐标值(与x + width具有相同的值, 如果width为负值, 则为x的值)。

2.8. DOMRectReadOnly.bottom, 返回DOMRect的底坐标值(与y + height具有相同的值, 如果height为负值, 则为y的值)。

2.9. DOMRectReadOnly.left, 返回DOMRect的左坐标值(与x具有相同的值, 如果width为负值, 则为x + width的值)。

3. 例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Element.getBoundingClientRect()方法和DOMRect对象</title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#pDiv {
				width: 400px;
				height: 400px;
				margin: 30px; 
				border: solid 10px;
				/*position: relative;*/
				/*padding: 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)。<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">
			var d = document.querySelector("#myDiv");
			document.write("offsetWidth: " + d.offsetWidth + " offsetHeight: " + d.offsetHeight + " offsetLeft: " + d.offsetLeft + " offsetTop: " + d.offsetTop + "<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>

3.2. 效果图