javascript获取元素的位置坐标和尺寸

华宇智能

已于 2023-02-17 15:14:31 修改

阅读量1.2k

点赞数

分类专栏：前端开发文章标签： js 获取位置获取尺寸

于 2020-09-22 14:47:24 首次发布

本文链接：https://blog.csdn.net/xuefu2008/article/details/108731546

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

示例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>365codes.com</title>
</head>
<body>
	<input id="usernameId"></input>
</body>
    <script type="text/javascript">
	function getLeft(e){
	  var offset=e.offsetLeft;
	  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
	  return offset;
	}
	 
	function getTop(e){
	  var offset=e.offsetTop;
	  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
	  return offset;
	}
	 
	var element = document.getElementById('usernameId');
	alert("对象usernameId的坐标x="+getTop(element)+",y="+getLeft(element)+";宽度w="+element.offsetWidth+",高度h="+element.offsetHeight);
	</script>
</html>

JS获取位置和尺寸：

obj.clientWidth //获取元素的宽度（width+padding）
obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的left
obj.offsetTop //元素相对于父元素的top
obj.offsetWidth //元素的宽度(width+padding+border)
obj.offsetHeight //元素的高度