`
鹤惊昆仑
  • 浏览: 229020 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

firefox3终于支持getBoundingClientRect了

阅读更多
可惜仅有IE(IE5)很早就支持,chrome DOM就不支持这个方法。除了top left right bottom这几个属性,firefox还增加了width和height属性。
console.log(document.body.getBoundingClientRect());
分享到:
评论

相关推荐

    js getBoundingClientRect() 来获取页面元素的位置.docx

    在以前的 Opera 和 Firefox 版本中,需要使用循环来获取元素的位置,而现在已经支持 getBoundingClientRect() 方法,提高了开发效率。 下面是一个使用 getBoundingClientRect() 方法获取元素位置的示例代码: ```...

    Firefox getBoxObjectFor getBoundingClientRect联系

    Firefox浏览器提供两种方法来实现这个功能:`getBoxObjectFor()` 和 `getBoundingClientRect()`。然而,随着时间的推移,`getBoxObjectFor()` 已经被废弃,推荐使用 `getBoundingClientRect()`。 `getBoxObjectFor...

    js中getBoundingClientRect的作用及兼容方案详解.docx

    2. **现代浏览器**(如 Chrome, Firefox, Safari, IE8 及以上版本): - 支持所有属性。 - `left` 和 `top` 的值准确无误。 #### 四、兼容性解决方案 为了确保代码在各个浏览器中的兼容性,可以通过以下方式调整...

    javascript 获取元素位置的快速方法 getBoundingClientRect()

    值得注意的是,`getBoundingClientRect()`方法在大部分现代浏览器中都得到了很好的支持,包括IE8及以上版本、Firefox 3.0+、Opera 9.5+。然而,一些较旧的浏览器如Firefox 2.x、Safari、Chrome早期版本以及Konqueror...

    解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    在处理兼容性问题时,特别是在Firefox和Chrome浏览器之间,问题的根源在于两个浏览器对`document.body.scrollTop`和`document.documentElement.scrollTop`的支持不同。在Firefox中,对`document.body.scrollTop`的...

    js getBoundingClientRect() 来获取页面元素的位置

    然而,随着浏览器的更新,`getBoundingClientRect()` 方法已被广泛支持,包括Firefox 3.0+和Opera 9.5+,使得开发者能够更高效地获取元素位置,而不再需要像过去那样通过循环计算。 以下是对`getBoundingClientRect...

    javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    这个方法在现代浏览器中广泛支持,包括IE5以上版本、Firefox 3.0+ 和 Opera 9.5+。它的使用极大地提高了获取页面元素位置的效率,特别是在处理动态布局或者需要精确计算元素位置的场景时。 在早期的非IE浏览器中,...

    saveImageAtFixedIntervals:一个 Firefox 插件,用于以固定时间间隔保存某个 DOM 的图像

    标题中的“saveImageAtFixedIntervals”是一款专为Firefox浏览器设计的插件,其主要功能是在用户指定的时间间隔内自动捕获并保存网页上特定DOM元素的图像。这个工具对于那些需要持续监控网页变化,例如网页设计迭代...

    js获取div的位置坐标

    if (el.getBoundingClientRect) { // IE, Chrome, Firefox, Safari, Opera box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var ...

    JS实现拖动示例代码

    这个方法特别适用于获取页面元素相对于视窗的位置信息,而在过去,开发者需要通过一系列复杂的计算来确定元素的位置,如今getBoundingClientRect()已经得到主流浏览器的支持,包括Firefox 3.0+和Opera 9.5+,因此,...

    JS解决position:sticky的兼容性问题的方法

    总结起来,通过创建一个Vue组件并利用JavaScript来检测和模拟`position:sticky`,我们可以有效地解决在不支持`position: sticky`的浏览器(尤其是旧版Android设备)上的兼容性问题。这种方式保证了布局在各种环境下...

    js精确定位HTML标签的TOP和LEFT值

    - 对于Gecko内核的浏览器(如Firefox),使用`getBoxObjectFor`方法获取位置信息。 - 对于Safari和Opera浏览器,则递归地累加所有祖先元素的偏移量。 4. **考虑父元素滚动**:考虑到父级元素可能存在滚动的情况,...

    JS获取各种高度宽度1

    4. `layerX`:Firefox特有,相对于当前坐标系的位置,如果没有设置绝对定位或相对定位,则以页面为参考,否则以元素边框为参考。 接下来是元素尺寸和位置的属性: 1. `offsetWidth`和`offsetHeight`:包含元素的...

    手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

    在W3C标准中,可以通过`getComputedStyle()`方法获取元素的计算样式,该方法在Firefox、Chrome、Safari等基于webkit的浏览器中都得到了支持。然而,在IE6/7/8这些旧版本浏览器中,我们需要使用`currentStyle`属性来...

    前端开发的面试经

    例如,Firefox和其他现代浏览器使用`addEventListener`方法,而Internet Explorer则使用`attachEvent`方法。 - **Ajax请求**:处理跨浏览器差异时,需要注意不同浏览器对Ajax的支持程度和实现细节。 - **鼠标事件**...

    web弹出div大小拉伸

    对于视频播放的兼容性,HTML5 `<video>` 标签已经提供了很好的跨浏览器支持,包括主流的Chrome、Firefox、Safari、Edge和IE11。但是,为了确保万无一失,我们可以检测浏览器对不同视频格式的支持,并根据需要提供多...

    WOW.js(可视区域展示动画)

    WOW.js 兼容大多数现代浏览器,包括 Chrome、Firefox、Safari、Edge 和 IE9+。它利用浏览器的 `getBoundingClientRect()` 方法来检测元素是否在视口内,所以性能相对较好。然而,由于依赖于 CSS3 动画,一些较旧或...

    图片瀑布流jQuery代码兼容ie6+主流浏览器

    对于"图片瀑布流jQuery代码兼容ie6+",这意味着这个代码片段旨在利用jQuery来创建瀑布流布局,并且兼容Internet Explorer浏览器从版本6到最新的现代浏览器,如Chrome和Firefox。 在实现图片瀑布流的过程中,主要...

Global site tag (gtag.js) - Google Analytics