<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元素位置、大小、鼠标定位操作
JavaScript获取HTMLDOM节点元素的方法的总结
JavaScript tab标签 自适应宽度的标签导航
我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没...
Javascript学习总结, Javascript学习总结, Javascript学习总结, Javascript学习总结 Javascript学习总结
主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
JavaScript中的循环总结(教辅)JavaScript中的循环总结(教辅)JavaScript中的循环总结(教辅)JavaScript中的循环总结(教辅)JavaScript中的循环总结(教辅)JavaScript中的循环总结(教辅)JavaScript中的循环...
在课堂上学到的JavaScript进行总结,希望可以帮助更多的人,多多分享自己,从而能互相学习,如果写的有错误的地方也希望大家能指正
JavaScript知识点个人总结
本篇文章,小编为大家介绍关于用JavaScript获取DOM元素位置和尺寸大小的方法,有需要的朋友可以参考一下
JavaScript学习笔记,详细总结。总结了JavaScript学习过程中的重点、难点。
JavaScript语言基础知识点总结,考过试的童鞋都知道什么叫知识点总结吧,很实用哦。是图片格式的因为用思维导图做的
html,javascript元素属性文档
JavaScript 表格宽度拖动 用IE打开
javascript动态生成页面元素
JavaScript常用运算符和操作符总结(教辅)JavaScript常用运算符和操作符总结(教辅)JavaScript常用运算符和操作符总结(教辅)JavaScript常用运算符和操作符总结(教辅)JavaScript常用运算符和操作符总结(教辅)...
javascript获取网页高度宽度.rar
javascript 获取网页高度宽度.pdf
javascript基础知识总结,详细的介绍了基础知识