Javascript erhält und bestimmt die Höhe, Breite usw. des Browserfensters, Bildschirms, der Webseite usw. _Javascript-Kenntnisse

HTML-präzise Positionierungsattribute: scrollLeft, scrollWidth, clientWidth, offsetWidth

scrollHeight: Ermitteln Sie die Bildlaufhöhe des Objekts.
scrollLeft: Legt den Abstand zwischen der linken Kante des Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder ruft ihn ab.
scrollTop: Legt den Abstand zwischen der obersten Kante des Objekts und dem obersten Ende fest oder ruft ihn ab des sichtbaren Inhalts im Fenster
scrollWidth: Ermittelt die Bildlaufbreite des Objekts
offsetHeight: Ermittelt die Höhe des Objekts relativ zum Layout oder der übergeordneten Koordinate, die durch die Eigenschaft offsetParent angegeben wird
offsetLeft: Ermittelt die Höhe des Objekts relativ zum Layout oder der übergeordneten Koordinate, die durch die Eigenschaft offsetParent angegeben wird. Berechnen Sie die linke Position
offsetTop: Ermitteln Sie die berechnete obere Position des Objekts relativ zum Layout oder der übergeordneten Koordinate, die durch das Attribut offsetTop angegeben wird
event.clientX Die horizontale Koordinate relativ zum Dokument
event.clientY Die vertikale Koordinate relativ zum Dokument
event.offsetX ist die horizontale Koordinate relativ zum Container
event.offsetY ist die vertikale Koordinate relativ zum Dokument Container
document.documentElement.scrollTop ist der Wert des vertikalen Scrollens
event.clientX document.documentElement.scrollTop ist relativ zur horizontalen Position des Dokuments. Der Betrag des Koordinatenscrollens in vertikaler Richtung
Die Unterschiede zwischen IE und Firefox lauten wie folgt:
IE6.0, FF1.06:

Code kopieren Der Code lautet wie folgt:

clientWidth = Breite der Auffüllung
clientHeight = Höhe der Auffüllung
offsetWidth = Breite der Auffüllung des Randes
offsetHeight = Höhe des Auffüllungsrandes
IE5.0/5.5:
clientWidth = Breite – Rand
clientHeight = Höhe – Rand
offsetWidth = Breite
offsetHeight = Höhe

Tipp: Das Margin-Attribut in CSS hat nichts mit clientWidth, offsetWidth, clientHeight und offsetHeight zu tun

Die Breite des sichtbaren Bereichs der Webseite: document.body.clientWidth
Die Höhe des sichtbaren Bereichs der Webseite: document.body.clientHeight
Die Breite des sichtbaren Bereichs der Webseite: document.body.offsetWidth (einschließlich der Breite der Seitenlinien )
Die Höhe des sichtbaren Bereichs der Webseite: document.body.offsetHeight (einschließlich der Höhe der Seitenlinien)
Die Breite des Volltextes der Webseite: document.body.scrollWidth
Die Höhe des vollständigen Textes der Webseite: document.body.scrollHeight
Die Höhe der gescrollten Webseite: document.body.scrollTop
Die linke Seite der gescrollten Webseite: document .body.scrollLeft
Der Hauptteil der Webseite: window.screenTop
Der linke Teil des Hauptteils der Webseite: window.screenLeft
Die Höhe der Bildschirmauflösung: window.screen. Höhe
Die Breite der Bildschirmauflösung: window.screen.width
Höhe des verfügbaren Arbeitsbereichs auf dem Bildschirm: window.screen.availHeight
Breite des verfügbaren Arbeitsbereichs auf dem Bildschirm: window.screen.availWidth

Technische Punkte

Der Code in diesem Abschnitt verwendet hauptsächlich einige Eigenschaften des Document-Objekts in Bezug auf das Fenster. Die Hauptfunktionen und Verwendung dieser Eigenschaften sind wie folgt.
Um die Größe des Fensters zu ermitteln, müssen für verschiedene Browser unterschiedliche Eigenschaften und Methoden verwendet werden: Um die tatsächliche Größe des Fensters zu ermitteln, müssen Sie die Eigenschaften des Fensters unter Netscape verwenden Tief im Dokument, um die Körpererkennung durchzuführen. Wenn Sie in der DOM-Umgebung die Größe des Fensters ermitteln möchten, müssen Sie auf die Größe des Stammelements und nicht auf das Element achten.
Die innerWidth-Eigenschaft des Window-Objekts enthält die innere Breite des aktuellen Fensters. Die innerHeight-Eigenschaft des Window-Objekts enthält die Innenhöhe des aktuellen Fensters.
Das Body-Attribut des Document-Objekts entspricht dem Tag des HTML-Dokuments. Die documentElement-Eigenschaft des Document-Objekts stellt den Stammknoten des HTML-Dokuments dar.
document.body.clientHeight stellt die aktuelle Höhe des Fensters dar, in dem sich das HTML-Dokument befindet. document.body.clientWidth stellt die aktuelle Breite des Fensters dar, in dem sich das HTML-Dokument befindet.

Beispielcode

Code kopieren Der Code lautet wie folgt:

🎜 >                                                                                                                                           Die tatsächliche Größe des Browserfensters –>
Die tatsächliche Höhe des Browserfenster:

Tatsächliche Breite des Browserfensters:
>                                                                                                                                                                                            () //Funktion: Größe abrufen
                                                                                                                                                                                                                                                                                     seit cument.body.clientWidth)) winWidth = document .body.clientWidth;
​winHeight= document.body.clientHeight;
//Erkennen Sie den Text, indem Sie tief in das Dokument eindringen und die Fenstergröße ermitteln
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//Die Ergebnisse werden in zwei Textfelder ausgegeben
document.form1.availHeight.value = winHeight;
document .form1.availWidth.value = winWidth;
                              
                     findDimensions();





Interpretation des Quellprogramms

(1) Das Programm erstellt zunächst ein Formular mit zwei Textfeldern, um die aktuelle Breite und Höhe des Fensters anzuzeigen. Deren Werte ändern sich, wenn sich die Fenstergröße ändert. (2) Im folgenden JavaScript-Code werden zunächst zwei Variablen winWidth und winHeight definiert, um die Höhen- und Breitenwerte des Fensters zu speichern. (3) Verwenden Sie dann in der Funktion findDimensions() window.innerHeight und window.innerWidth, um die Höhe und Breite des Fensters zu ermitteln, und speichern Sie sie in den beiden oben genannten Variablen.

(4) Erkennen Sie dann den Körper, indem Sie tief in das Dokument eindringen, ermitteln Sie die Fenstergröße und speichern Sie sie in den beiden oben genannten Variablen.

(5) Am Ende der Funktion werden die Ergebnisse durch den Zugriff auf die Formularelemente über den Namen in zwei Textfeldern ausgegeben.
(6) Schließen Sie am Ende des JavaScript-Codes den gesamten Vorgang ab, indem Sie die Funktion findDimensions() aufrufen.