firefox3终于支持getBoundingClientRect了

最新推荐文章于 2024-03-30 11:17:31 发布
最新推荐文章于 2024-03-30 11:17:31 发布
阅读量170 收藏
点赞数
分类专栏： 跨浏览器前端开发 文章标签： Chrome IE Firefox JavaScript ViewUI
本文介绍了浏览器中getBoundingClientRect方法的支持情况及其属性。IE5最早支持此方法，但Chrome DOM不支持。除了top、left、right和bottom属性外，Firefox还额外支持width和height属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

可惜仅有IE（IE5）很早就支持，chrome DOM就不支持这个方法。除了top left right bottom这几个属性，firefox还增加了width和height属性。

console.log(document.body.getBoundingClientRect());
JS | 元素视图方法之getBoundingClientRect()方法详解，秒懂！
青春木鱼的博客
10-16 7730
在前端开发过程中，我们经常需要获取HTML元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具，它可以帮助我们获取元素的大小及其相对于视口的位置。
快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect
qq_35436516的博客
09-23 3708
获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。 下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 getB...
Firefox getBoxObjectFor getBoundingClientRect联系
01-19
在一个含有Flash的网页中插入Flash会提示： 警告： 不建议使用 getBoxObjectFor() 。 请使用 element.getBoundingClientRect()。 经本人测试，确实是Firefox在含flash的网页上提示，还不知道原因，也没找到解决办法。 Firefox版本：3.0.3 Flash: 10.0 html页面代码： 代码如下:<html> <body> <object type=”application/x-shockwave-flash” data=”Inc/images/clock.swf” width=”400″ height=”400″> <pa
getBoundingClientRect()
Della_UI的博客
05-19 1827
1、语法var rect=el.getBoundingClientRect();2、返回值返回一个包含left、top、right、bottom、width、height值的矩形对象。注： width和height：ie9及以上支持width/height属性。 兼容ie6~ie8的width/height的写法：return{ width:rect.right-rect.left,
Firefox在含有flash的网页上提示：不建议使用 getBoxObjectFor() 。 请使用 element.getBoundingClientRect()。
greenerycn的专栏
10-25 1424
在一个含有Flash的网页中插入Flash会提示： 警告： 不建议使用 getBoxObjectFor() 。 请使用 element.getBoundingClientRect()。经本人测试，确实是Firefox在含flash的网页上提示，还不知道原因，也没找到解决办法。Firefox版本：3.0.3Flash: 10.0html页面代码：html>body>object type="appl
getBoundingClientRect
qq_38677540的博客
09-19 189
https://www.jianshu.com/p/fd6ec6c19492 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 如果是标准盒子模型，元素的尺寸等于width/height+padding+border-width的总和。如果box-sizing: border-box，元素的的尺寸等于width/height。 <!DOCTYPE html> <html lang="en"> <head&...
JavaScript中getBoundingClientRect()方法
每天多一点干货
03-13 1260
getBoundingClientRect方法获取元素位置getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height； 这里的to...
js getBoundingClientRect() 来获取页面元素的位置.docx
01-19
在以前的 Opera 和 Firefox 版本中，需要使用循环来获取元素的位置，而现在已经支持 getBoundingClientRect() 方法，提高了开发效率。 下面是一个使用 getBoundingClientRect() 方法获取元素位置的示例代码： ```...
javascript 获取元素位置的快速方法 getBoundingClientRect()
10-29
值得注意的是，`getBoundingClientRect()`方法在大部分现代浏览器中都得到了很好的支持，包括IE8及以上版本、Firefox 3.0+、Opera 9.5+。然而，一些较旧的浏览器如Firefox 2.x、Safari、Chrome早期版本以及Konqueror...
js getBoundingClientRect() 来获取页面元素的位置
10-28
该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页
10-29
这个方法在现代浏览器中广泛支持，包括IE5以上版本、Firefox 3.0+ 和 Opera 9.5+。它的使用极大地提高了获取页面元素位置的效率，特别是在处理动态布局或者需要精确计算元素位置的场景时。 在早期的非IE浏览器中，...
getBoundingClientRect()方法
Br不二
11-22 1084
getBoundingClientRect()方法的介绍，用法，实例等
getBoundingClientRect() 的用法
diligentkong的博客
07-30 8862
getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。 来看个例子：<style> *{ margin: 0; padding: 0;
获取元素位置信息：getBoundingClientRect
weixin_30533797的博客
10-17 165
一个神奇的方法。 一、历史 偷个懒，上个传送门：http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二、介绍 DOM元素方法，返回一个TextRectangle对象，包含top,left,bottom,right,width,height六个属性，表示元素相对于浏览器显示区域的四个偏移量和元素自身的宽高，都是nu...
getBoundingClientRect 获取元素位置和大小
最新发布
呆呆狗
03-30 1365
getBoundingClientRect() 是一个用于获取元素位置和大小的方法。它返回一个 DOMRect对象，其提供了元素的大小及其相对于视口的位置，
getboundingclientrect/getClientRects,今天才知道. 真是是孤陋寡闻了
weixin_30399055的博客
11-25 889
还是实际解释下，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也不好理解，下面用图说明下。 该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。 getBoundingClientRect() 来获取页面元素的位置 ...
getBoundingClientReect的作用及兼容方案
前进者
11-13 2922
&lt;div id="text" style="wigth:100px ;  height:100px ; background-color:red"&gt;&lt;/div&gt; &lt;script&gt;     function  getobjxy(obj){             var xy = obj.getBoundingClientRect();             ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值