offset元素偏移量

最新推荐文章于 2023-06-02 15:17:30 发布

01xm

最新推荐文章于 2023-06-02 15:17:30 发布

阅读量964

点赞数 1

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

本文链接：https://blog.csdn.net/Bon_nenul/article/details/118005819

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

offset元素偏移量

offset： 偏移量，利用offset可以动态的获取元素在页面中的位置、大小信息。

属性	功能
element.offsetLeft	返回元素相对带有定位父元素左方的偏移
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回的数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回的数值不带单位

offset和style的区别

先复习一下页面中加入css样式的方式
1.行内嵌入式（直接在标签内添加）
2.页内嵌入式（使用style{ } 添加）
3.导入外部样式文件（link 、css）

offset	style
可以得到任意样表中的样式值	只能得到行内样式表中的样式值
返回的数值无单位	返回的数值有单位
offset.width包含padding+border+width	style.width不包含padding+border+width
offset等属性只是可读属性，只能获取不能赋值	style是可读写属性，可以获值也可以赋值
想要获取元素大小位置就选择offset	想要给元素改值就选择style

【案例】计算鼠标在盒子内的坐标

1.我们在盒子内点击想要得到鼠标距离盒子左右的距离
2.首先得到鼠标在页面中的坐标（e.pageX,e.pageY）
3.其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）
4.用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标

<body>
	<div class="box"></div>
	<script>
		var box = doument.querySelector('.box')
		box.addEventListener('click',function(){
			var x = e.pageX - this.offsetLeft
			var y = e.pageY - this.offsetTop
			this.innerHTML = 'x坐标是' + 'x' + 'y坐标是' + 'y'
		})
	</script>
</body>