! Wichtig und Anzeige: keine und .height() Seltsamkeit

Question

Ich entdeckte gestern etwas seltsam, wenn Sie mit einem Stück JS-Code arbeiten. Ich hatte eine div, die versteckt war (display:none), und ich benutzte die Höhe davon in einigen Berechnungen in JS. Das war alles in Ordnung, bis ich meine "versteckte" Klasse hinzugefügt (die display:none !important hat).

Plötzlich war die Höhe immer 0. Es gab keine anderen Änderungen als !important auf dem Display.

Nach einigem Graben ich das Problem verengt habe bis auf etwas finde ich ziemlich seltsam:

#b { display:none; }   /* reported height is 36 */ 
#c { display:none !important; } /* reported height is 0 */ 

Ich habe eine sehr grundlegende erstellt haben JSFiddle diese zu isolieren. Es verwendet auch Vanille JS, um Höhe zu bekommen, die anscheinend gut/wie erwartet funktioniert.

Es scheint, als ob jQuery die Höhe auf unsichtbaren DIVs falsch meldet, und dass sich !important korrekt verhält.

Ist das ein Fehler in jQuery?

Answer 1

Ich glaube nicht, dass dies ein Fehler in jQuery ist, setzt jQuery display-block für einen Bruchteil einer Sekunde height zu berechnen, wenn Sie die Einstellung !important sogar, dass ovverriden ist, das ist alles.

Ich denke, wir brauchen etwas mehr Erklärung

Es gibt grundsätzlich keine Möglichkeit, die height ein Element von DOM zu erhalten, wenn es keine Höhe hat. Wenn also displaynone ist, ist die height nicht existent oder zero.

In jQuery wenn display ist none, können wir display-block für einen Bruchteil einer Sekunde genau stellen Sie die height zu bekommen, während diese inline Stil in der Regel geändert wird, wie durch jQuery getan.

<div id="something" style="display:block">/div> 

Und dann height genommen wird, aber zu diesem Zeitpunkt wenn Sie display:none!important in CSS diese Inline-Stil wird nicht funktionieren gesetzt und height berechnet wird zero.

In meiner persönlichen Meinung ist es immer besser nicht zu verwenden, wichtig, weil es Ihren Code/Präsentation schwer zu lesen macht. CSS hat normalerweise viele Möglichkeiten, Stile zu überschreiben.

Wenn Sie noch Ihren Stil, !important könnte, ein Inline fortfahren möchten außer Kraft setzen und die Höhe selbst mit der jQuery-Show für eine zweite Technik, oder einfach überschreiben die jQuery-Funktion berechnen Höhe :)