getBoundingClientRect用于获取元素相对与浏览器视口的位置 由于getBoundingClientRect()已经是w3c标准,所以不用担心兼容,不过在ie下还是有所区别 { top: '元素顶部相对于视口顶部的距离', bottom: '元素底部相对于视口顶部的距离', left: '元素左边相对于视口左边的距离', right: '元素右边相对于视口左边的距离', height: '元素高度', width: '元素宽度' } // 兼容写法 function getCli…

getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置.getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分). 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height:这里的top.left和css中的理解很相似,width.heigh…

前情 在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 标准盒子模型:元素的尺寸等于width/height + padding + border-width的总和.如果box-sizing: border-box,则元素的的尺寸等于 width/height. top, left, right, bottom属…

平时经常获取一个div的位置,用了定位,取位置还好,在不用定位的情况下,计算一个div在页面的距离,就可以用到getBoundingClientRect()方法. getBoundingClientRect()  获取元素的位置 用法: document.documentElement.getBoundingClientRect var div = document.documentElementById(id); div .getBoundingClientRect().top 获取div到页…

补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作.本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来…

一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一个TextRectangle对象,包含top,left,bottom,right,width,height六个属性,表示元素相对于浏览器显示区域的四个偏移量和元素自身的宽高,都是number,表示的是像素值. document.body.getBoundingClientRect().top doc…

WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后退一项  ▲GoForward 相当于IE的"前进"按钮,使你在当前历史列表中前进一项  ▲GoHome    相当于IE的"主页"按钮,连接用户默认的主页  ▲GoSearch  相当于IE的"搜索"按钮,连接用户默认的搜索页面  ▲Navigat…

开始表演 今天来聊一下两个相似的方法,它们就是:getBoundingClientRect().getClientRects(). 只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来. 自述 getClientRects() "我来了,你看到我了,当然看到我咯,彪悍一个." "想知道怎么驾驭我吗?你想吗?像这样." let rectList = document.getElementById('box').getClientRects(); /* 我返回的是…

 壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset().top = offsetTop - scrollTop的结论,不过此结论只适用于监听元素滚动条,而window的滚动条并不满足.那么在滚动window滚动条时如何获取元素距离视窗顶部的距离呢,这就不得说说本文的主角getBoundingClientRect方法.  贰 ❁ 关于getBoundi…

getBoundingClientRect使用指南 author: @TiffanysBear 主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题. getBoundingClientRect Element.getBoundingClientRect() 含义: 方法返回元素的大小及其相对于视口的位置. 值: 返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相…