我们有时候会用到元素的具体位置,我们会采取使用逐层计算的方式,但是如果嵌套太深,书写表达式是件麻烦的事,效率往往也不太高。
getClientRects方法
用法:Element
*{margin:0px;padding:0px;} #box{position:absolute;left:100px;top:120px;width:200px;border:1px solid #ccc;} span{border:1px solid red;} <div id="box"> <span id="content">hello world hello world hello world hello world hello world hello world</span> </div>
如图,span标签被分成了三行,document.getElementById(‘content’).getClientRects()的返回值中,我们获得了三个对象,每个对象下面的属性都是其相对与视口左上角顶点的距离。如果我们将#box移动到视口左上角以外的地方,我们也是可以取到值的,只不过是负数而已。
注:这属性最先是由IE提出,后被W3C引入并制订了标准。所以低版本下的IE也是兼容的。只是IE8-(包括)没有width和height属性。当作用于非行内元素时,在IE7-还是会返回多个对象。
getBoundingClientRect方法
用法:Element.getBoundingClientRect(),返回值是一个返回的值是一个DOMRect对象,是元素的大小及其相对于视口的位置的对象。
依旧是get
注:在IE8-下没有宽高这个属性(一直记成IE9+才有这个属性,错啦,这么好用的方法就这么浪费了)。
IE7下的值会多出2px,因为e7-的html元素坐标会从(2,2)开始算起
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。