Es ist ziemlich bequem, die Größe sichtbarer Elemente von JS zu erhalten. Sie können diese Methode direkt verwenden:
Die Codekopie lautet wie folgt:
Funktion getDefaultStyle (OBJ, Attribut) {// gibt die endgültige Stilfunktion zurück, die mit IE und DOM kompatibel ist, setzt Parameter: Elementobjekt, Stilmerkmale
return obj.currentStyle? obj.currentStyle [Attribut]: document.defaultView.getComputedStyle (obj, false) [Attribut];
}
Aber wenn dieses Element versteckt ist (Anzeige: keine) und seine Größe unbekannt anpassungsfähig ist, funktioniert die obige Methode nicht! Weil das Display: Kein Element hat keine physische Größe! Die Tragödie passierte so!
Glücklicherweise gibt es auch Sichtbarkeit: in CSS versteckt, was unsichtbar ist. Der größte Unterschied zwischen IT und Display: Keine ist, dass Sichtbarkeit: Hidden eine physische Größe hat. Wenn Sie physische Größen haben, können Sie die Größe nach der obigen Methode erhalten. Nachdem Sie die Anzeige geändert haben: Keine Sichtbarkeit: Versteckt, gibt es auf der Seite einen leeren Speicherplatz. Selbst wenn Sie die Sichtbarkeit ändern: versteckt zu Anzeigen: Keine unmittelbar nach dem Erhalt der Größe wird der Teil der Seite weiterhin erschüttern. Dann ist es am besten, dieses versteckte Element aus dem Bildschirm oder aus dem Dokumentstrom (Position: Absolut) zu verschieben. Dies scheint perfekt zu sein, aber die Tragödie geschieht wieder. Wenn Sie dieses Element erneut anzeigen möchten, ist das Element unsichtbar und die Position nicht richtig, da dies die Sichtbarkeit des Elements ist: verborgen; Position: Absolut. Nachdem Sie die Größe erhalten haben, müssen Sie den Stil wieder herstellen. Es soll die Position und die Sichtbarkeitsattribute auf den ursprünglichen Stil zurücksetzen.
Dies ist die grundlegende Implementierung von JS, um die Größe versteckter Elemente zu erhalten. Wenn Sie interessiert sind, können Sie sich die Methode in dem Buch "Kenntnisse in JavaScript" ansehen.
Ich habe hier auch eine einfache Demo gemacht. Sie können den Quellcode überprüfen:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> js erhält die Größe des verborgenen Elements </title>
<style type = "text/css">
</style>
<script type = "text/javascript" src = "http://www.css88.com/tool/css3preview/jquery-1.2.2.min.js"> </script>
</head>
<body>
<div id = "test_display_block" style = "display: keine; border: 10px solid #cdcdcd; margin-links: 100px"> Dies ist der Testbehälter, der sichtbare Container <br /> Dies ist der Testbehälter. test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, Der Testbehälter, der Testbehälter, der Testbehälter, der Testbehälter, der Testbehälter, der Testcontainer, der Testbehälter, der Testbehälter, der
<div id="test_display_none" style="display:none; border:10px solid #CDCDCD">This is the test container, this is the test container,<br />This is the test container,<br />This is the test container,<br />This is the test container,<br />This is the test container,<br /></div>
<div id = "test_display_click"> klicken Sie auf mich </div>
<script type = "text/javaScript">
// Richter Objekttyp
Funktion GetType (o) {
var _t;
return ((_t = typeof (o)) == "Objekt"? O == null && "null" || Object.Prototype.toString.call (o) .Slice (8, -1): _ t) .tolowerCase ();
}
// Elementstil bekommen
Funktion getStyle (El, Stylename) {
Return El.Style [Stylename]? El.Style [Stylename]: El.CurrentStyle? El.CurrentStyle [Stylename]: Window.GetComputedStyle (El, Null) [Stylesame];
}
Funktion GetStylenum (El, Stylename) {
return parseInt (getStyle (El, Stylename) .Replace (/px | pt | em/ig, ''));
}
Funktionsetstyle (el, obj) {
if (Gettype (obj) == "Objekt") {
für (s in obj) {
var cssarrrt = ssplit ("-");
für (var i = 1; i <cssarrrt.length; i ++) {
CSSarrrt [i] = CSSarrrt [i] .Replace (CSSarrrt [i] .CHARAT (0), CSSarrrt [i] .Charat (0) .touppercase ());
}
var cssarrtnew = cssarrrt.join ("");
El.Style [cssarrtnew] = obj [s];
}
}
anders
if (Gettype (obj) == "String") {
El.Style.CSSTEXT = OBJ;
}
}
Funktion getSize (el) {
if (GetStyle (El, "Display")! = "Keine") {
return {width: El.Offsetwidth || GetStylenum (El, "Breite"), Höhe: El.Offseteight || GetStylenum (El, "Höhe")};
}
var _addcss = {display: "", Position: "Absolute", Sichtbarkeit: 'Hidden'};
var _oldcss = {};
für (i in _addcss) {
_oldcss [i] = getStyle (el, i);
}
setStyle (el, _addcss);
var _width = el.clientwidth || GetStylenum (El, "Breite");
var _Height = el.clientHeight || GetStylenum (El, "Höhe");
für (i in _oldcss) {
setStyle (el, _oldcss);
}
return {width: _width, Höhe: _Height};
}
var dd = document.getElementById ("test_display_block");
alarm (getSize (dd) .Height);
document.getElementById ("test_display_click"). onclick = function () {
dd.style.display = "block";
document.getElementById ("test_display_none"). style.display = "block";
}
alert ($ ("#test_display_none"). height ());
</script>
</body>
</html>
Off -Thema: Im Allgemeinen haben das JavaScript -Framework und die Bibliotheken diese Methode verkörpert. Zum Beispiel können wir die Methoden der Höhe () und width () direkt verwenden, um die Größe der versteckten Elemente zu erhalten.