Warum funktioniert getBoundingClientRect nur lokal?

Question

Betrachten wir die Folge 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">cat</div></div> 

und CSS:

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

die Breite und Höhe des Elements Mess id=a mit .getBoundingClientRect()

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

die Dimensionen (320,91) gibt. Die gleiche Messung am Element id=b ergibt die transponierten Abmessungen (91,320). Wunderbar.

Wenn ich jedoch versuche, das Element id=c zu messen, das einfach die Drehung in einem inneren div nistet, bekomme ich die ursprünglichen Abmessungen (320,91)! Sollten die Bounding Boxes für b und c nicht gleich sein?

Wenn nicht, wie kann ich die Bounding Box von c korrekt melden?

---

Wenn relevant, ich bin mit Chromium, Version 37.0.2062.120 Ubuntu 12.04 (281580) (64-Bit).

Answer 1

Nein, das rotierte Bit innerhalb c erstreckt sich aus c, ohne seine Größe zu ändern. Dadurch sollte es etwas klarer.

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>

(ich das Vertrauen auf die automatische Globals entfernt a, b und c oben Es macht einfach nervös mich auf automatische Globals zu verlassen, sie "So leicht beschattet."

BTW, können Sie Dinge wie diese mit den Chrom-Dev-Tools visualisieren: Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie "Inspect element", und es öffnet das Bedienfeld Elemente in die Entwicklungswerkzeuge. Wenn sich der Cursor zu diesem Zeitpunkt über dem Markup für das Element im Bedienfeld des Elements befindet, markieren die Entwicklerwerkzeuge dieses Element (einschließlich seiner Begrenzungsbox) auf der Seite.