javascript– 为什么getBoundingClientRect只能在本地工作？_html-js-css

概述考虑以下HTML(JSFiddle link)：<div id='a' class='box'>cat</div> <div id='b' class='box rotate'>cat</div> <div id='c' class='box'><div class='rotate'>c

考虑以下HTML(JSFiddle link)：

和CSS：

.Box    { Font-size:500%; }.rotate { transform: rotate(-90deg); }

使用.getBoundingClIEntRect()测量元素ID = a的宽度和高度

$(a)[0].getBoundingClIEntRect().wIDth$(a)[0].getBoundingClIEntRect().height

给出(320,91)的尺寸.在元素ID = b上测量相同的东西给出了转置尺寸(91,320).精彩.

但是,当我尝试测量元素ID = c时,它只是将旋转嵌入内部div中,我得到原始尺寸(320,91)！ b和c的边界框不应该相同吗？

如果没有,我怎样才能让c的边界框正确报告？

如果相关,我使用的是Chromium,版本37.0.2062.120 Ubuntu 12.04(281580)(64位).

最佳答案不,c中的旋转位延伸出c,而不改变其大小.这应该让它更清晰一些：
var bBox_a = document.getElementByID("a").getBoundingClIEntRect();snippet.log("a: " + bBox_a.wIDth + "x" + bBox_a.height);var bBox_b = document.getElementByID("b").getBoundingClIEntRect();snippet.log("b: " + bBox_b.wIDth + "x" + bBox_b.height);var bBox_c = document.getElementByID("c").getBoundingClIEntRect();snippet.log("c: " + bBox_c.wIDth + "x" + bBox_c.height);
.Box {    Font-size:500%;}.rotate {    transform: rotate(-90deg);}#a {    border: 1px solID black;}#b {    border: 1px solID red;}#c {    border: 1px solID green;}#c .rotate {    border: 2px solID yellow;}
(我删除了对上面的自动全局变量a,b和c的依赖.这让我依赖自动全局变得紧张,它们很容易被遮蔽.)
顺便说一句,您可以使用Chromium的开发工具来显示这样的事情：右键单击元素并选择“Inspect element”,它将打开开发工具中的Elements面板.此时,当光标位于Element面板中元素的标记上时,dev工具将在页面上突出显示该元素(包括其边界框).
          总结       以上是内存溢出为你收集整理的javascript  – 为什么getBoundingClientRect只能在本地工作？全部内容，希望文章能够帮你解决javascript  – 为什么getBoundingClientRect只能在本地工作？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1122094.html

javascript– 为什么getBoundingClientRect只能在本地工作？

`发表评论`

`评论列表（0条）`