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

前端之家收集整理的这篇文章主要介绍了javascript – 为什么getBoundingClientRect只能在本地工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

考虑以下HTML(JSFiddle link):

301_460@">cat301_460@ rotate">cat301_460@">

和CSS:

.@R_301_460@    { 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 b@R_301_460@_a = document.getElementById("a").getBoundingClientRect();
snippet.log("a: " + b@R_301_460@_a.width + "x" + b@R_301_460@_a.height);

var b@R_301_460@_b = document.getElementById("b").getBoundingClientRect();
snippet.log("b: " + b@R_301_460@_b.width + "x" + b@R_301_460@_b.height);

var b@R_301_460@_c = document.getElementById("c").getBoundingClientRect();
snippet.log("c: " + b@R_301_460@_c.width + "x" + b@R_301_460@_c.height);
.@R_301_460@ {
    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;
}
301_460@">cat301_460@ rotate">cat301_460@">
Meta.stackexchange.com/a/242144/134069 -->

猜你在找的HTML相关文章