getBoundingClientRect

今天fix一个拖拽库的IE8bug，发现DOM元素有一个getBoundingClientRect的方法。

getBoundingClientRect使用指南

主要介绍getBoundingClientRect的基本属性，以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义： 方法返回元素的大小及其相对于视口的位置。 这个api，可以写成这样： var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft function isElView(el) { var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离 var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可见区域顶端的距离 var se = document.documentElement.clientHeight

商品添加到购物车动画getBoundingClientRect获取元素位置

rectObject = object.getBoundingClientRect(); 2.返回值类型： rectObject.top：元素上边到视窗上边的距离; rectObject.right： 1.2 用户滑动右侧的内容左侧的导航栏会响应式改变 右侧内容监听一个scroll事件，当触发滑动事件的时候获取粘性定位在顶部的标题，根据标题使导航栏定位到相应的li var obj = element.getBoundingClientRect document.getElementsByClassName('goodTitle'); for(var i = 0; i < titles.length; i++) { var style = titles[i].getBoundingClientRect

getBoundingClientRect方法获取元素在页面中的相对位置

获取元素位置可以用 offset 或 getBoundingClientRect，使用 offset 因为兼容性不好，比较麻烦，offset获取位置会形成“回溯”。 而 getBoundingClientRect 方法则 兼容性较好，基本所有的浏览器都支持了，且使用起来更容易和简单。 1.使用语法： element.getBoundingClientRect(); 方法中没有任何参数，返回值为对象类型。 和 height 属性的解决方法： 在IE8及以下浏览器中，可以通过计算得到元素的宽和高： 如： var dom = document.querySelector("#demo"), r = dom.getBoundingClientRect

通过元素的 getBoundingClientRect() 方法获取元素的实际宽高与实际展示的不符合

.container { .video-container { height: calc(100% - 90px); } } } 现象：通过元素的 getBoundingClientRect 这里会有一个异步或时间顺序问题，导致获取的与实际的不一致 解决：由于我这里的属性 v-direction 视频的方向是通过监听视频的相关事件获取之后，赋值到 body 上的，所以这里是一个异步函数，执行顺序一定在 getBoundingClientRect () 之后，于是我需要加个 setTimeout setTimeout(() => { const obj = container.getBoundingClientRect() }, 10

js判断元素在某个区域内是否可见（转）

getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置 getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。 ; getBoundingClientRect判断元素是否在可视区域 以前的办法是通过各种offset判断元素是否可见，网上很多教程，大家可以自己去查找。  getBoundingClientRect是获取可视区域相关位置信息的，使用这个属性来判断更加方便： function isElementInViewport (el) { var rect =

jQuery源码解析之position()

//（注意：offset()的本质是getBoundingClientRect()的top、left + pageYOffset、pageXOffset） return { offset = elem.getBoundingClientRect(); } return { top: offset.top - parentOffset.top 注意： ① getBoundingClientRect() 计算的是目标元素的border的位置（左上角），是不包括margin的 ② 如果不加上margin的话（代码是通过减去，来算上margin的） 举个例子： let p=document.querySelector("#pTwo") console.log(p.getBoundingClientRect(),'pTwo11'); //x:8,y: (),'pTwo11'); //x:8,y:16 可以看到getBoundingClientRect()指定坐标是到border上的，这是不准确的，因为在里面的子元素的位置也会受父元素的border影响

JavaScript实现图片懒加载(lazyload)

我们实现页面懒加载的方案一般有三种方式： 获取元素clientHeight等位置信息 Element.getBoundingClientRect() IntersectionObserver 我们先写 () Element.getBoundingClientRect() 返回一个DOMRect对象，包含了描述元素的位置属性：left，right，top，bottom。 rectObject = object.getBoundingClientRect(); 我们可以使用定时器或者scroll事件，在回调函数调用元素的getBoundingClientRect()方法， //懒加载核心:判断加载 function islazyLoadBool(dom) { let imgTop = dom.getBoundingClientRect().top; //获取响度浏览器可视区的高度 document.documentElement.scrollTop || document.body.scrollTop; return imgTop <= clientHeight + 100 ; } 因为getBoundingClientRect

getBoundingClientReact方法

getBoundingClientRect方法兼容IE7写法 rectObject = object.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置 ie7中的 getBoundingClientRect方法只有bottom、left、right、top属性，没有width合height 通过上图可以看出： 除了width和height，其它几个属性都是相对于视口的左上角而言的 根据left、right的值可以推算出width 根据top、bottom的值可以推算出height 完整的代码如下： /** * getBoundingClientRect 兼容IE7 * @param {DOM Object} obj */ function getBoundingClientRect(obj) { var boundingClientRect = obj.getBoundingClientRect newObj.height = boundingClientRect.bottom - boundingClientRect.top; } return newObj; } 相关链接 getBoundingClientRect

10.8 如何用js验证一下boz-sizing样式对块级盒子大小的影响？

代码：

关于getBoundingClientRect验证示例1