前端js——获取元素位置、元素尺寸

offsetTop(offsetLeft)

获得元素相对于父元素的坐标top值

• 1.没有定位的元素，获得的是距离body的距离
• 2.有定位获得的是距离前一个有定位元素的距离，如果前面没有仍为距离body的距离

#x{
				width: 600px;
				height: 500px;
				border: solid 2px blueviolet;
				margin: 30px auto;
				/*position: relative;*/
			}
			#y{
				width: 300px;
				height: 100px;
				background-color: red;
				border: 5px solid bisque;
				margin: 40px;
				/*position: absolute;*/
			}
<div id="x">
			<div id="y"></div>
 </div>

js

var y=document.getElementById('y');
			console.log(y.offsetLeft);

此时获得值为y距离网页左边的距离,会随着页面大小而改变
全页面
半页面

有定位是显示的是距离前一个有定位元素的距离（其中距离中不包含边框）

获得元素宽高

js
获得的是可视区域的宽高（随着网页窗口大小改变）

var w=document.documentElement.clientWidth;
            console.log(w);

获得元素的宽高(获得元素为实际宽度 包括内边距，边框)

  console.log(y.offsetWidth);