Es gibt einige Methoden für JS, um die Breite und Höhe von versteckten Elementen im Internet zu erhalten, aber es kann einige Situationen geben, die nicht erhalten werden können.
Zum Beispiel:
<! DocType html> <html Lang = "en"> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <titel> test </title> </head> <body> <div id = "test" style = "style: keine" reichen "> Ich habe einen Pot Pot Pot to to the comfort" the comfort "the comfort" the comfort "test" style: "display:" reichen "> Ich habe einen Pot mit" Ich habe ">" Ich habe einen Pot, den ich habe ". Alle Flüsse und Meere werden in die Flüsse und die Meere gegossen, und sie werden den Menschen auf der Welt gegeben. </div> <div id = "test2" style = "display: keine"> <div style = "display: keine"> <div id = "test2_child"> Ich habe einen Topf Wein, der ausreicht, um den Staub zu trösten. Alle Flüsse und Meere werden in die Flüsse und die Meere gegossen, und sie werden den Menschen auf der Welt gegeben. </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child"> Ich habe einen Topf Wein, der ausreicht, um den Staub zu trösten. Alle Flüsse und Meere werden in die Flüsse und die Meere gegossen, und sie werden den Menschen auf der Welt gegeben. </div> </div> </div> </div> </body> </html>
Der Test kann erhalten werden, aber Test2_Child kann nicht erhalten werden. In Anbetracht dieser Situation habe ich eine Methode geschrieben, um sie selbst zu lösen.
Lösung:
1. Holen Sie sich das Element (nehmen Sie die Breite und Größe) alle versteckten Vorfahren, bis das Körperelement, einschließlich Sie sich selbst.
2. Holen Sie sich die Anzeige- und Sichtbarkeitseigenschaften aller versteckten Elemente und retten Sie sie.
3. Setzen Sie alle versteckten Elemente auf Sichtbarkeit: versteckt; Anzeige: Block! Wichtig; (Der Grund für wichtig ist, eine unzureichende Priorität zu vermeiden).
4. Holen Sie sich die Breite und Höhe des Elements (nehmen Sie die Breite und Höhe).
5. Wiederherstellen Sie die Anzeige- und Sichtbarkeitseigenschaften des Stils aller versteckten Elemente.
6. Gibt die Elementbreite und den Höhenwert zurück.
Code -Implementierung:
Funktion getSize (id) {var width, Höhe, elem = document.getElementById (id), nonenodes = [], kodestyle = []; GetNonenode (Elem); // Erhalten Sie das Element der Mehrschichtanzeige: Keine; setNoDestyle (); width = elem.clientwidth; Höhe = Elem.ClientHeight; resumenodestyle (); return {width: width, Höhe: Höhe} Funktion getNonenode (Knoten) {var display = getStyles (Knoten) .GetPropertyValue ('display'), tagname = node.nodename.tolowerCase (); if (display! = 'none' && tagname! = 'body') {getNonenode (node.parentNode); } else {nonenodes.push (Knoten); if (tagname! = 'body') getNonenode (node.parentnode); }} // Diese Methode kann abrufen, ob es die endgültige Anzeigeeigenschaftseinstellung gibt, und kann nicht style.display sein. Funktion GetStyles (Elem) {// Unterstützung: IE <= 11+, Firefox <= 30+ ( #15098, #14150) // IE Ausläufe auf Elemente, die in Popups erstellt wurden // ff in der Zwischenzeit Würfe auf Bildelemente durch "DefaultView.GetComputedstyle" var View = elem.ownerDocument.DefaultView. if (! view ||! view.opener) {view = window; } return view.getComputedStyle (Elem); }; Funktion setNoDestyle () {var i = 0; für (; i <nonenodes.length; i ++) {var vissibility = nonenodes [i] .style.visibility, display = nonenodes [i] .Style.display, style = nonenodes [i] .getAttribute ("style"); // andere Display -Stile überschreiben Nicht -Enoden [i] .SetatTribute ("Stil", "Sichtbarkeit: versteckt; Anzeige: Block! Wichtig;" + Stil); Knotenstil [i] = {Sichtbarkeit: Sichtbarkeit, Anzeige: Anzeige}}} Funktion resumenodestyle () {var i = 0; für (; i <nonenodes.length; i ++) {nonenodes [i] .Style.vissibility = Knodestyle [i] .vissibility; Nonenodes [i] .Style.Display = Knodestil [i] .Display; }}}Beispieldemonstration:
var testSize = getSize ('test'); console.log ("test-> width:" + testsesize test3ChildSize = getSize ('test3_child'); console.log ("test3_child-> width:" + test3ChildSize.width + "Höhe:" + test3ChildSize.Height); // Der Druckwert lautet wie folgt Test-> Breite: 417 Höhe: 18Test2Child2-> Breite: 417 Höhe: 18Test3_Child-> Breite: 417 Höhe: 18Anmerkungen:
1. Öffnen Sie alle versteckten Ahnenelemente und erhalten Sie die Breite und Höhenwerte des Elements. In einigen Fällen kann es falsch sein, den Wert zu erhalten.
PS: Aber machen Sie sich darüber keine Sorgen, hacken Sie einfach die Methode, wenn etwas wirklich schief geht.
2. Der Grund, warum die Attribute für die Anzeige und die Sichtbarkeitsattribute der versteckten Ancestral -Elemente später zurückgesetzt werden sollen, ohne sich selbst zu beeinflussen.
3. Zusätzlich wird die GetStyles -Methode aus dem JQuery -Quellcode extrahiert, damit diese Methode ermitteln kann, ob die endgültige Anzeigeattributeinstellung vorliegt.
PS: Kann nicht aus style. -display erhalten werden.
Die obige Methode, um versteckte Elemente in JS zu erhalten, ist der gesamte Inhalt, der vom Editor geteilt wird. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.