javaScript 元素的位置，尺寸，宽度总结下

梦秋雨

2015-04-28

<style>
	body{
		margin:0px;
		padding:0px;
		}
	#div1{
		width:300px;
		height:200px;
		background:#CC3;
		margin:30px auto 0px 10px;
		position:relative;
		}
	#div2{
		width:300px;
		height:200px;
		background:#096;
		position:absolute;
		left:310px;
	}
	#div11{
		margin-left:10px;
		}	
</style>

</head>
<body>
	<div id='div1'>
    	xxxxxx
        <div id='div11'>fasdfa</div>
    </div>
	<div id='div2'>
    
    </div>
    <div id='div3' style="width:200px">
    	<div id='div31'></div>
    </div>

</body>

window.onload=function(){
		//获得绝对位置
		//这是个测试
		/*var oParent=document.getElementById('div11').offsetParent;
		//var oParent=document.getElementById('div11').offsetLeft;
		while(oParent !==null){
				console.info('oParent: '+oParent.offsetLeft+oParent); //实际上是margin-left
				oParent=oParent.offsetParent;
			}*/
			
		//获得绝对位置
		//网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标
		//高类似这样写
		function getAbsLeft(node){
				var leftX=0;
				while(node !==null){
						console.info(node+' '+leftX);
						leftX+=node.offsetLeft;//这个得放上面，因为最后一次循环的时候为null就会报错
						node=node.offsetParent;
					}
				return leftX;
			}
		var oDiv11=document.getElementById('div11');
		console.info(getAbsLeft(oDiv11));
		
		
		//相对来位置
		//网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。
		//有了绝对位置就可以获得相对位置，用绝对位置减去滚动的距离就可  document中的scrollLeft 与 scrollTop
		
		
		//compat mode  兼容模式
		//BackCompat：标准兼容模式关闭。
		//CSS1Compat：标准兼容模式开启。
		//当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
		//当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
		//以上是做兼容用的
		
		function getRelLeft(node){
				var leftX=0;
				var scrollLeftX=0;
				while(node !==null){
						console.info(node+' '+leftX);
						leftX+=node.offsetLeft;//这个得放上面，因为最后一次循环的时候为null就会报错
						node=node.offsetParent;
					}
				console.info(document.compatMode);//CSS1Compat
				if(document.compatMode=='BackCompat'){
						scrollLeftX=document.body.scrollLeft;
						console.info('关scrollLeftX: '+scrollLeftX);
					}else{
						scrollLeftX=document.documentElement.scrollLeft;
						console.info('开scrollLeftX: '+scrollLeftX);	
						}
				
				return leftX-scrollLeftX;
			}
		
		//oDiv11.onclick=getRelLeft(oDiv11);
		//下面这个是延迟了让它出现滚动条都是不出值
		setTimeout(function(){
				console.info('开始');
				getRelLeft(oDiv11);
			},6000);
		//怎么说呢，逻辑上是这样，可惜没有看出效果
		//若有错误，欢迎指出
		
		//快速得到元素的相对位置
		console.info('快速'+oDiv11.getBoundingClientRect().left);//20
		//绝对位置的效果还是没有出来
		console.info('快速'+(oDiv11.getBoundingClientRect().left+document.documentElement.scrollLeft));
	};

//在些说明下，绝对位置的图解,结合代码中的讲述

javaScript 元素的位置，尺寸，宽度总结下