elem.style.left得不到left的值

<!DOCTYPE html>
<html>
<head>	
	<title></title>	
	<style type="text/css">	
		#div {
			width: 50px;
			height: 50px;
			background: red;	
			position: absolute;	
			left: 50px;	
		}	
	</style>
</head>
<body>
	<div id="div"></div>
	<script type="text/javascript">
		var div = document.getElementById("div");	
		var left = div.style.left;	
		alert(left);	
	</script>
</body>
</html>

结果:

解决:

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
客户区指的是当前窗口。
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于:
1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。offsetLeft则仍然能够取到,无需事先定义div的位置。
elem.getBoundingClientRect()是一个用于获取元素在视口中的位置和尺寸信息的方法。它返回一个DOMRect对象,包含了元素的top、left、right、bottom、width和height等属性。通过这些属性,我们可以获取元素相对于视口的位置以及宽高等信息。在引用中,示例代码展示了如何使用该方法来获取元素的位置信息。而引用中的示例代码则展示了使用原生JavaScript来获取元素位置信息的方式。需要注意的是,如果在页面渲染完成之前就尝试获取元素的位置信息,可能会导致获取不到或不准确的结果,因此可以将获取位置信息的代码放在mounted函数中,或者使用this.$nextTick来确保在页面渲染完成后再获取位置信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE的常见错误及解决方法](https://blog.csdn.net/python2021_7/article/details/123700096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Element.getBoundingClientRect()](https://blog.csdn.net/qq_42931285/article/details/124369585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值