Tại sao getBoundingClientRect chỉ hoạt động cục bộ?

Question

Cân nhắc HTML sau (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">cat</div></div> 

và CSS:

.box { font-size:500%; } 
.rotate { transform: rotate(-90deg); } 

đo chiều rộng và chiều cao của nguyên tố id=a sử dụng .getBoundingClientRect()

$(a)[0].getBoundingClientRect().width 
$(a)[0].getBoundingClientRect().height 

cho kích thước của (320,91). Đo cùng một thứ trên phần tử id=b cho các kích thước được chuyển đổi (91,320). Tuyệt vời.

Tuy nhiên, khi tôi cố gắng đo yếu tố id=c chỉ đơn giản là tổ chức vòng quay bên trong div bên trong, tôi nhận được kích thước ban đầu (320,91)! Các hộp giới hạn cho b và c có giống nhau hay không?

Nếu không, làm thế nào tôi có thể nhận được hộp giới hạn c để báo cáo chính xác?

---

Nếu có liên quan, tôi đang sử dụng Chromium, Phiên bản 37.0.2062.120 Ubuntu 12.04 (281580) (64-bit).

Answer 1

Không, bit được xoay trong phạm vi c kéo dài ra khỏi c mà không thay đổi kích thước của nó. Điều này sẽ làm cho nó một chút rõ ràng hơn:.

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; 
 
}

<div id="a" class="box">cat</div> 
 
<div id="b" class="box rotate">cat</div> 
 
<div id="c" class="box"> 
 
    <div class="rotate">cat</div> 
 
</div> 
 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

(tôi loại bỏ sự phụ thuộc vào globals tự động a, b và c trên Nó chỉ khiến tôi bồn chồn dựa vào globals tự động, họ Để dễ dàng bị che khuất.)

BTW, bạn có thể hình dung những thứ như thế này bằng công cụ dev của Chromium: Nhấp chuột phải vào phần tử và chọn "Kiểm tra phần tử" và nó sẽ mở bảng điều khiển Yếu tố trong các công cụ dev. Tại thời điểm đó, khi con trỏ của bạn vượt quá đánh dấu cho phần tử trong bảng điều khiển của phần tử, công cụ dev sẽ làm nổi bật phần tử đó (bao gồm cả hộp giới hạn của nó) trên trang.