So erhalten Sie die Höhe und Breite versteckter Elemente (display:none) in javascript_javascript skills

JS ist relativ praktisch, um die Größe sichtbarer Elemente zu ermitteln. Sie können diese Methode direkt verwenden:

Code kopieren Der Code lautet wie folgt:

function getDefaultStyle(obj,attribute){ // Die endgültige Stilfunktion zurückgeben, kompatibel mit IE und DOM, Parameter festlegen: Elementobjekt, Stileigenschaften
obj.currentStyle zurückgeben ?obj.currentStyle[attribute ]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

Aber wenn dieses Element ausgeblendet ist (display:none), Die Größe ist unbekannt. Wie kann die obige Methode nicht funktionieren? Denn Elemente mit display:none haben keine physikalische Größe! So geschah eine Tragödie!

Glücklicherweise gibt es in CSS „visibility:hidden“, ein unsichtbares Attribut. Der größte Unterschied zu display:none besteht darin, dass „visibility:hidden“ eine physische Größe hat. Wenn Sie über eine physische Größe verfügen, können Sie die Größe mit der oben genannten Methode ermitteln. Nach dem Ändern von display:none in perspective:hidden wird die Seite dort jedoch einen leeren Bereich aufweisen Aufgrund der Größe wackelt die Seite noch ein wenig. Dann ist es am besten, das ausgeblendete Element vom Bildschirm bzw. aus dem Dokumentenfluss zu verschieben (Position: absolut). Das scheint perfekt, aber die Tragödie passiert erneut. Wenn Sie dieses Element erneut anzeigen möchten, ist das Element unsichtbar und die Position ist falsch, da dieses Element sichtbar ist: versteckt; Position: absolut. Nachdem Sie also die Größe ermittelt haben, müssen Sie den Stil wiederherstellen. Setzen Sie einfach die Positions- und Sichtbarkeitseigenschaften auf ihre ursprünglichen Stile zurück.

Dies ist die grundlegende Implementierungsmethode zum Ermitteln der Größe versteckter Elemente in js. Wenn Sie interessiert sind, können Sie die Methode im Buch „Mastering JavaScript“ lesen.

Ich habe hier auch eine einfache Demo erstellt, Sie können sich den Quellcode ansehen:

Kopieren Sie den CodeDer Code ist wie folgt:

 

这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

 

这是test容器，这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

       

点我

       

题外话:一般可以直接使用. height() und width()隐藏元素的尺寸.