原生js获取元素尺寸以及jquery获取元素尺寸

原生js获取

var box = document.getElementById("box");
box.clientWidth;	//获取该元素宽度包含padding值
box.clientHeight;	//获取该元素高度包含padding值
box.offsetWidth;	//获取该元素宽度+padding +border
box.offsetHeight;	//获取该元素高度+padding+border
box.clientLeft;		//获取该元素的左边框
box.clientTop;		//获取该元素的上边框

jquery获取定位父元素以及距离

 var box = $(".box");		//jquery获取类名为box的元素<div class="box"></div>
 box.width();				//获取box的实际宽度
 box.height();				//获取box的实际高度
 box.innerWidth();			//获取box的实际宽度+padding
 box.innerHeight();			//获取box的实际报读+padding
 box.outerWidth();			//获取box的实际宽度+padding+border
 box.outerHeight();			//获取box的实际高度+padding+border
 box.outerWidth(true);		//获取box的实际宽度+padding+border+margin
 box.outerHeight(true);		//获取box的实际高度+padding+border+margin

原生js获取元素实际宽高

var box = document.getElementById("box");
getComputedStyle(box).['width'];	//获取box的宽度
getComputedStyle(box).['height'];	//获取box的高度
box.style.width;					//只能获取行内样式宽度
box.style.height;					//只能获取行内样式高度

原生js获取定位父元素以及距离

<div id="box">
			<div id="son"></div>
		</div>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 200px;
			height: 200px;
			background-color: #0000FF;
			position: relative;
			border: 10px solid red;
		}
		#box #son{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			top: 10px;
			left: 10px;
			border: 10px solid red;
		}
		
	</style>
	<script type="text/javascript">
		var son = document.getElementById("son");
		son.offsetParent;				//获取定位父元素
		console.log(son.offsetTop);		//获取子元素距离父元素的定位top值
		console.log(son.offsetLeft);	//获取子元素距离父元素的定位left值
	</script>
	
	注：此方法有兼容问题，IE会计算边框