Zusammenfassung der Methoden zum Erhalten verschiedener Höhe und Breite und des Standorts von Webseiten in JS

Bildschirmobjekt

Holen Sie sich die Höhe und Breite des Bildschirms (Auflösung)

 screen.width // breitbildschirm.Height // High Screen.Availwidth // Der Bildschirm kann verwendet werden, um den Wert nach der Höhe der Systemkomponente zu subtrahieren.

Fensterobjekt

Holen Sie sich Fensterposition und Größe

 window.screentop // Die Entfernung vom oberen Rand des Fensters zum oberen Rand des Bildschirmfensters. // Chrome 1366 FF 1366 IE 1366 Fenster. // Chrome 643 FF 657 dh 673Window.Outerwidth // Die Breite des Browserfensters selbst (sichtbare Flächenbreite + Browser -Randbreite) Alarm (Fenster.uterwidth); // Chrom 1366 ff 1382 dh 1382 // Zieh an, dass das Browserfenster beim Maximieren keine Randbreite hat und wenn es nicht maximiert wird, gibt es eine 8px -Grenzbreite // ff und dh nach oben, unten, links und rechts. // Chrom 728 ff 744 dh 744

Elementobjekt

Bevor Sie die verschiedenen Höhen und Breiten von Elementobjekten einführen, muss das Boxmodell erklärt werden.

Standardbox-Modell- box-sizing:content-box;

 Boxwidth = 2*Rand + 2*Rand + 2*Polsterung + BreiteBoxHeight = 2*Rand + 2*Rand + 2*Polsterung + Höhe

Wenn keine Scrollbar erscheint

 Body {Margin: 0;}#Demo {width: 100px; Höhe: 100px; Polsterung: 10px; Grenze: 20px; Rand: 30px; Hintergrundfarbe: rot;} <div id = "Demo"> 123456789 123456789 </div>

Clientwidth: Gibt die sichtbare Breite des Inhalts auf der Seite zurück (ohne Grenzen, Margen oder Scrollbars)

ClientHeight: Gibt die sichtbare Höhe des Inhalts auf der Seite zurück (mit Ausnahme von Grenzen, Rändern oder Scrollbars)

 clientwidth = 2*padding + width - scrollBarwidth console.log (document.getElementById ('Demo'). Clientwidth); // 120 zu diesem Zeitpunkt scrollBarwidth = 0clientHeight = 2*Padding + Höhe - ScrollBarHeight console.log (document.getElementById ('Demo'). ClientHeight); // 120 zu diesem Zeitpunkt Scrollbarbreite = 0

Offsetwidth: Gibt die Breite des Elements einschließlich Rand und Füllung zurück, enthält jedoch keine Margen

Offseteight: Gibt die Höhe des Elements einschließlich Grenzen und Füllungen zurück, enthält jedoch keine Margen

 Offsetwidth = 2*Border + 2*Polster + Breite Konsole.log (document.getElementById ('Demo').

OffsetLeft: Erhält die berechnete linke Position des Objekts relativ zum Layout oder der von der OffsetLeft -Eigenschaft angegebenen Elternkoordinate.

Offsettop: Erhält die berechnete obere Position des Objekts relativ zum Layout oder zur übergeordneten Koordinate, die von der Offsettop -Eigenschaft angegeben ist

 console.log (document.getElementById ('Demo'). Offsetleft) //30console.log(document.getElementById('Demo').offsettop) // 30

Wenn eine Scrollbar erscheint

 Körper {Rand: 0; Polsterung: 20px; Breite: 1000px; Höhe: 500px;} <div id = "Demo"> 123456789123456789 </div>

Scrollwidth: Gibt die gesamte Breite des Elements zurück (einschließlich versteckter Orte mit Scroll -Stangen)

ScrollHeight: Gibt die Höhe des gesamten Elements zurück (einschließlich versteckter Orte mit Scroll -Stangen)

 scrollwidth = 2*padding + width console.log (document.body.scrollwidth) // 1040ScrollHeight = 2*Padding + Width Console.log (document.body.scrollHeight) // 540

Scrolltop: Die Höhe des verborgenen Elements, wenn Sie den Bildlaufblock hinunterrutschen. Wenn nicht festgelegt wird, beträgt der Standardwert 0

Scrollleft: Die Breite des verborgenen Elements, wenn der Bildlaufblock nach rechts schieben. Wenn nicht festgelegt wird, beträgt der Standardwert 0

Ereignisobjekt

Das Ereignisobjekt repräsentiert den Status eines Ereignisses, wie das Element, in dem das Ereignis auftritt, der Status der Tastaturschlüssel, die Position der Maus und den Status der Maustaste.

Ereignis.Pagex: Relativ zu den Koordinaten der gesamten Seite ist die obere linke Ecke der Seite der horizontale Abstand vom Ursprung der Koordinate bis zu dem Punkt, an dem sich die Maus befindet (IE8 unterstützt sie nicht)

Event.Pagey: Relativ zu den Koordinaten der gesamten Seite ist die obere linke Ecke der Seite der vertikale Abstand vom Ursprung der Koordinate bis zu dem Punkt, an dem sich die Maus befindet (IE8 unterstützt sie nicht)

Ereignis.ClientX: Die Koordinaten des relativen visuellen Bereichs unter Verwendung der oberen linken Ecke des Browser -Sichtbereich

Ereignis.Clienty: Die Koordinaten des relativen visuellen Bereichs unter Verwendung der oberen linken Ecke des Browser -visuellen Bereichs als vertikaler Abstand vom Koordinatenursprung bis zu dem Punkt, an dem sich die Maus befindet

Ereignis.Screenx: Relativ zu den Koordinaten des Computerbildschirms, der horizontale Abstand vom Koordinatenursprung bis zu dem Punkt, an dem sich die Maus befindet, und die obere linke Ecke des Bildschirms als horizontaler Abstand vom Koordinatenursprung bis zu dem Punkt, an dem sich die Maus befindet

Ereignis.Screeny: Relativ zu den Koordinaten des Computerbildschirms, der vertikale Abstand vom Koordinatenursprung bis zu dem Punkt, an dem sich die Maus befindet, und die obere linke Ecke des Bildschirms als vertikaler Abstand vom Koordinatenursprung bis zu dem Punkt, an dem sich die Maus befindet

Ereignis.OffsetX: Im Vergleich zu seinen eigenen Koordinaten basiert der horizontale Abstand vom Koordinatenursprung der oberen linken Ecke seiner eigenen Polsterung bis zu dem Punkt, an dem sich die Maus befindet

Ereignis.Offsety: In Bezug auf seine eigenen Koordinaten basiert der horizontale Abstand von der Koordinatenursprung der oberen linken Ecke seiner eigenen Polsterung bis zu dem Punkt, an dem sich die Maus befindet, auf ihrer horizontalen Entfernung vom Koordinatenursprung.

Zusammenfassen

Das obige ist eine Zusammenfassung der Methoden, um verschiedene Höhen und Positionen von Webseiten in JS zu erhalten, was beim Lernen von JS alle Bequemlichkeit bietet. Freunde in Not können sich darauf beziehen.