JS中的getClientRects与getBoundingClientRect方法
我们有时候会用到元素的具体位置,我们会采取使用逐层计算的方式,但是如果嵌套太深,书写表达式是件麻烦的事,效率往往也不太高。 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)开始算起
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |