offsetleft和offsettop的使用

最新推荐文章于 2023-12-22 16:28:01 发布

正在修炼web的小芮

最新推荐文章于 2023-12-22 16:28:01 发布

阅读量997

点赞数

分类专栏： js常用的小方法文章标签： javascript

本文链接：https://blog.csdn.net/m0_71814235/article/details/126679096

版权

js常用的小方法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

offsetLeft和offsetTop理解为当前元素距离父元素左上角的偏移值(偏移量)

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>offsetleft和offsettop的使用</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.test{
				width: 300px;
				border: 5px solid black;
				margin: 10px;
				padding: 10px;
				/* 添加相对定位*/
				position: relative;
				left: 100px;
                top: 320px;
			}
		</style>
	</head>
	<body>
		<div id="test" class="test">
			<p>点击按钮获取 div 元素的左侧偏移量:</p>
			<p>
				<button onclick="myfn1()">点我</button>
				
			</p>
			<p>
				<span id="demo"></span>
			</p>
		</div>
		<h2>offsetLeft 是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。</h2>
		<h2>offsetLeft和offsetTop理解为当前元素 距离 父元素左上角的偏移值(偏移量)</h2>
		<script>
			var testDiv = document.querySelector('#test');
			var demo = document.querySelector('#demo');
			// 获取div 元素的左侧偏移量
			// 获取div元素的顶部偏移量
			function myfn1(){
				document.querySelector('#demo').innerHTML = 'offsetLeft 为:' +testDiv.offsetLeft + '|' +'offsetTop 为:' +testDiv.offsetTop
			}
		</script>
	</body>
</html>

demo代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript实现鼠标经过显示隐藏内容</title>
		<style>
			.test{
				width:400px;
				height: 400px;
				border:1px solid ;
				margin:0 auto;
				text-align: center;
			}
			.test:after{/*添加参照*/
				content:"";
				display:inline-block;
				width:5px;
				height:100%;
				background:red;
				vertical-align: middle;
			}
			.test img{
				width:96px;
				height:96px;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="test">
		    <img src="img/1.png" alt="" />
		</div>
	</body>
</html>

预览效果