DOM中的offset属性

最新推荐文章于 2022-09-12 10:48:04 发布

每一天，每一步

最新推荐文章于 2022-09-12 10:48:04 发布

阅读量322

点赞数

分类专栏： javaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/u010234868/article/details/119919801

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
		}
		#box {
			width: 300px;
			height: 300px;
			margin: 50px;
			background-color: red;
			overflow: hidden;
			position: relative;
		}
		#child {
			width: 100px;
			height: 100px;
			background-color: pink;
			margin: 50px;
			border: 10px solid yellow;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="child"></div>
	</div>
	<script>
		var box = document.getElementById('box');
		var child = document.getElementById('child');
		// 获取父元素的位置和大小
		console.log('box.offsetLeft: ' + box.offsetLeft); // 50
		console.log('box.offsetTop: ' + box.offsetTop); // 50
		console.log('box.offsetWidth: ' + box.offsetWidth); // 300
		console.log('box.offsetHeight: ' + box.offsetHeight); // 300
		// 获取子元素的位置和大小  offsetLeft\offsetTop 相对于最近的定位父元素的位置，如果没有定位的父元素，则相对于body
		// console.log(child.offsetLeft); // 100
		// console.log(child.offsetTop); // 100
		// console.log(child.offsetWidth); // 140  offsetWidth包含border和padding
		// console.log(child.offsetHeight); // 140  offsetHeight包含border和padding

		// 给父元素加上定位 获取子元素的位置和大小 
		console.log('child.offsetLeft: ' + child.offsetLeft); // 50
		console.log('child.offsetTop: ' + child.offsetTop); // 50
	</script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中的offset属性

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; margin: 50px; background-color: red; .
复制链接

扫一扫

专栏目录