js, um grundlegende Browserinformationen zu erhalten_Grundkenntnisse

Sichtbare Bereichsbreite 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 Kanten)
Die Höhe des sichtbaren Bereichs der Webseite: document.body.offsetHeight (einschließlich der Breite der Kante)
Volltextbreite des Webseitenkörpers: document.body.scrollWidth
Vollständige Texthöhe des Webseitenkörpers: document.body.scrollHeight
Die Seite wurde so hoch gescrollt: document.body.scrollTop
Die linke Seite der Webseite, die gescrollt wird: document.body.scrollLeft
Im Hauptteil der Webseite: window.screenTop
Die linke Seite des Hauptteils der Webseite: window.screenLeft
Hohe Bildschirmauflösung: window.screen.height
Die Breite der Bildschirmauflösung: window.screen.width
Auf dem Bildschirm verfügbare Arbeitsbereichshöhe: window.screen.availHeight
Auf dem Bildschirm verfügbare Arbeitsbereichsbreite: window.screen.availWidth

HTML-präzise Positionierung: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: Ruft die Scrollhöhe des Objekts ab.
scrollLeft: Legt den Abstand zwischen dem linken Rand des Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder ruft diesen ab
scrollTop: Legt den Abstand zwischen der Oberkante des Objekts und der Oberkante des sichtbaren Inhalts im Fenster fest oder ruft diesen ab
scrollWidth: Ermitteln Sie die Bildlaufbreite des Objekts
offsetHeight: Ruft die Höhe des Objekts relativ zum Layout oder zur übergeordneten Koordinate ab, die durch die Eigenschaft „offsetParent“ der übergeordneten Koordinate angegeben wird
offsetLeft: Ruft die berechnete linke Position des Objekts relativ zum Layout oder zur übergeordneten Koordinate ab, die durch die Eigenschaft offsetParent
angegeben wird offsetTop: Ruft die berechnete obere Position des Objekts relativ zum Layout oder den übergeordneten Koordinaten ab, die durch das offsetTop-Attribut
angegeben werden horizontale Koordinate von event.clientX relativ zum Dokument
event.clientY vertikale Koordinate relativ zum Dokument
event.offsetX horizontale Koordinate relativ zum Container
event.offsetY vertikale Koordinate relativ zum Container
document.documentElement.scrollTop-Wert des vertikalen Scrollens
event.clientX document.documentElement.scrollTop Die horizontale Koordinate relativ zum Dokument. Das Ausmaß des vertikalen Bildlaufs

Die Unterschiede zwischen IE und Firefox sind wie folgt:

IE6.0, FF1.06:

clientWidth = Breitenpolsterung

clientHeight = Höhenpolsterung

offsetWidth = Breite des Auffüllrahmens

offsetHeight = Höhe des Auffüllrahmens

IE5.0/5.5:

clientWidth = Breite – Rand

clientHeight = Höhe – Rand

offsetWidth = Breite

offsetHeight = Höhe

(Es muss erwähnt werden: Das Margin-Attribut in CSS hat nichts mit clientWidth, offsetWidth, clientHeight und offsetHeight zu tun)

－－－－－－－－－－－－－－－－－

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.

Eine kleine Recherche zum Ermitteln der sichtbaren Fenstergröße verschiedener Browser.

In meinem lokalen Test: Es kann unter IE, Firefox und Opera verwendet werden

document.body.clientWidth

Document.body.clientHeight kann abgerufen werden, es ist sehr einfach und bequem.

Und in Unternehmensprojekten: Opera verwendet immer noch

document.body.clientWidth

document.body.clientHeight

Aber IE und Firefox verwenden

document.documentElement.clientWidth

document.documentElement.clientHeight

Es stellt sich heraus, dass der W3C-Standard Probleme verursachthttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wenn Sie diese Tag-Zeile zur Seite hinzufügen

Im IE: document.body.clientWidth ==> BODY-Objektbreite

document.body.clientHeight ==> BODY-Objekthöhe

document.documentElement.clientWidth ==> Sichtbare Bereichsbreite

document.documentElement.clientHeight ==> Höhe des sichtbaren Bereichs

In FireFox: document.body.clientWidth ==> BODY-Objektbreite

document.body.clientHeight ==> BODY-Objekthöhe

document.documentElement.clientWidth ==> Sichtbare Bereichsbreite

document.documentElement.clientHeight ==> Sichtbare Bereichshöhe?

In Opera: document.body.clientWidth ==> Sichtbare Bereichsbreite

document.body.clientHeight ==> Höhe des sichtbaren Bereichs

document.documentElement.clientWidth ==> Seitenobjektbreite (d. h. BODY-Objektbreite plus Randbreite) document.documentElement.clientHeight ==>gt; Seitenobjekthöhe (d. h. BODY-Objekthöhe plus Randhöhe)

Und wenn kein W3C-Standard definiert ist,

Dann ist IE: document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox ist: document.documentElement.clientWidth ==> Seitenobjektbreite (d. h. BODY-Objektbreite plus Randbreite)

document.documentElement.clientHeight ==> Seitenobjekthöhe (d. h. BODY-Objekthöhe plus Randhöhe)

Opera ist: document.documentElement.clientWidth ==> Seitenobjektbreite (d. h. BODY-Objektbreite plus Randbreite)

document.documentElement.clientHeight ==> Seitenobjekthöhe (d. h. BODY-Objekthöhe plus Randhöhe)

Das ist wirklich eine problematische Sache. Aus Sicht des Front-End-Designs und der Front-End-Entwicklung wäre es tatsächlich viel bequemer, weniger Objekte und Methoden zu haben und nicht die neuesten Standards zu verwenden. Wenn Sie jedoch nicht mit dem Trend mithalten können, werden Sie nie ein leitender Designer sein. Daher müssen wir dieses Wissen noch verstehen und beherrschen.