分享到微信朋友圈

打开微信,“扫一扫”功能,
即可将网页分享至好友/朋友圈。

文章索引

返回顶部
  / 学习笔记 / JS JQ / 获取nsIDOMClientRect(矩形盒子,left、top、right和bottom)

获取nsIDOMClientRect(矩形盒子,left、top、right和bottom)

本文为秃头大叔 小虎的个人博客 原创内容,转载请注明出处,有问题可联系本人!
本文地址:http://www.wuxiaohu.com/2018/04/16/994.html

没错,一开始就让我装一下逼吧,居然说出这么生僻显得高大上的词汇:nsIDOMClientRect。

nsIDOMClientRect

MDN的解释也就简简单单一句话(贡献者的中文翻译,原英文地址:https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect

代表一个矩形盒子。盒子类型由返回这种盒子对象的方法指定的。它是由像element.getBoundingClientRect的函数返回的。

所以,它就是一个表示一个盒子的各定位属性的对象;包括left、top、right、bottom、width、height、x、y;

不过因为具体方法不同,以及浏览器的差异,返回对象中某些值可能有缺失···

getBoundingClientRect()

仍然引用MDN上的解释:

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

其实还是很好理解的,唯一需要注意的就是它的兼容性:

1:各大浏览器都支持该属性,都返回一个矩形盒子对象;

2:浏览器不同、版本不同;返回的对象中,不包含某些值:

MDN上的语法和定义还是可以信的,但是兼容表格还是不能看,(新的兼容表格完善中···)

还是去 caniuse.com 看看吧····嗯,全部兼容性······all tracked(当前在用的流行版本,不包含古董版本),兼容99.69%

加上 IE (基本就是它了,其他浏览器的古董版本我就不信还有人在用)部分兼容的 0.29%   ;可喜可贺,兼容性可达 99.99%!!

        看图:

所以,废话这么多,要兼容 IE9 以下,就尽量不用 width、height 属性吧,其他就没什么顾虑了·····

3:transform 的偏移算不算呢??

答案是肯定的····结果都是盒子的矩形边到视窗的距离,随你怎么偏移,随你怎么旋转·····

人懒,懒得上测试图了····

还有一个神奇的类似方法:

getClientRects()

唯一不同的是,这个方法返回的是一个 nsIDOMClientRect  集合,那集合里面都是怎么得来的呢···

它是按 Element.getClientRects() 中 Element 的类型定的,分行内元素非行内元素做不同处理;

那这里的行内元素包括哪些这就不用我多说了吧;不过 inline-block、 inline-flex、 inline-table ··· 这些??

统统不是,连 inline-block 也不是!!!居然会这样?吓到我了啊喂,inline-block 不算行内元素?

认命吧,除了默默地用原生的 span 、 b 之类的标签,其他的就别想了····

那么,行内元素是按什么返回黑子数据呢;没错,你说对了!(什么,你没说?你连想都不想以下的吗??)就是“行”;

展示有几行,那么 getClientRects 返回的集合就有几个对象;和他的子元素没半毛钱干系·····:

看图:

以上:<span> 标签行内元素,但是其中加了一个 <br> 换行;总共 6 行;那么结果是:

<br> 的存在使得 出现了一个 width:0, 的对象??

那我去掉试试····:页面展示就是 5 行;那么结果是:

结果就是这么滴!!!

然后我发现,这结果是和文字分段有直接联系的:<br> 分割了文字成两个 "···" 包裹的文字;直接去掉 <br> 标签,仍会保留两个 "···",

结果还是一样:多出一个 x:325.6525 的对象····

哎,说这么多···getClientRects 这玩意儿估计还是用不到······感觉还有不少坑啊,还是 getBoundingClientRect()  NB!

终于还是被你发现了

o(* ̄▽ ̄*)ブ  大叔的卖萌!  o(* ̄▽ ̄*)ブ

评论(1)

apk
回复

You should be a part of a contest for one of the highest quality websites on the internet.
I will recommend this website!

发表评论