和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工具将在页面上突出显示该元素(包括其边界框).
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
