javaScript 元素的位置，尺寸，宽度总结下
<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));
};//在些说明下，绝对位置的图解,结合代码中的讲述
//相对位置的图解
//至此结束