Die sichtbare Flächenbreite der Webseite: Dokument.body.Clientwidth
Die sichtbare Höhe der Webseite: Dokument.Body.ClientHeight
Die sichtbare Flächenbreite der Webseite: document.body.Offsetwidth (einschließlich der Breite der Kantenlinie)
Die sichtbare Höhe der Webseite: Dokument.Body.offseteight (einschließlich der Breite der Kantenlinie)
Volltextbreite der Webseite: Dokument.body.Scrollwidth
Volltext der Webseite: Dokument.body.ScrollHeight
Die Webseite ist auf hoher Ebene eingeführt: document.body.scrolltop
Links von der Webseite, die eingeführt wurde: document.body.scrollleft
Im Hauptteil der Webseite: Fenster.Screentop
Links vom Haupttext der Webseite: Fenster.Screenleft
Auflösung der Hochbildschirme: window.screen.hohthy
Breite der Bildschirmauflösung: Fenster.Screen.width
Bildschirm verfügbarer Arbeitsbereich Höhe: Fenster.Screen.availHeight
Bildschirm verfügbar Arbeitsbereich Breite: window.screen.availwidth
Html präzise Positionierung: Scrollleft, Scrollwidth, Clientbreite, Offsetwidth
ScrollHeight: Holen Sie sich die Bildlaufhöhe des Objekts.
ScrollLeft: Stellen Sie den Abstand zwischen der linken Grenze des Objekts und dem linken Ende des aktuell sichtbaren Inhalts im Fenster ein oder
Scrolltop: Setzen Sie den Abstand zwischen der Oberseite des Objekts und der Oberseite des sichtbaren Inhalts im Fenster
Scrollwidth: Holen Sie sich die Bildlaufbreite des Objekts
Offseteight: Holen Sie sich die Höhe des Objekts in Bezug
OffsetLeft: Ruft die berechnete linke Position des Objekts relativ zum Layout- oder übergeordneten Koordinaten ab, die von der OffsetParent -Eigenschaft angegeben sind
Offsettop: Erhält die berechnete obere Position des Objekts relativ zum Layout oder zur übergeordneten Koordinate, die von der Offsettop -Eigenschaft angegeben ist
Ereignis.ClientX Horizontale Koordinaten relativ zum Dokument
Ereignis.Clienty vertikaler Koordinaten in Bezug auf das Dokument
Ereignis.OffsetX Horizontale Koordinaten in Bezug auf den Container
Ereignis.Offsety vertikale Koordinaten in Bezug auf den Container
document.documentElement.Scrolltop den Wert des skanischen Scrollens vertikal
Ereignis.ClientX + document.documentElement.scrolltop relativ zur horizontalen Koordinate des Dokument
Dh Firefox -Unterschiede sind wie folgt :
IE6.0, FF1.06+:
clientwidth = width + padding
ClientHeight = Höhe + Polsterung
Offsetwidth = Breite + Polsterung + Rand
Offseteight = Höhe + Polsterung + Rand
IE5.0/5.5 :
Clientwidth = Breite - Grenze
ClientHeight = Höhe - Grenze
Offsetwidth = Breite
Offseteight = Höhe
(Es sollte erwähnt werden, dass das Margin -Attribut in CSS nichts mit Clientbreite, Offsetwidth, ClientHeight und Offseteight zu tun hat)
-------------------
Technische Highlights
Der Code in diesem Abschnitt verwendet hauptsächlich einige Eigenschaften des Dokumentobjekts zum Fenster. Die Hauptfunktionen und die Verwendung dieser Eigenschaften sind wie folgt.
Um die Fenstergröße zu erhalten, müssen für verschiedene Browser unterschiedliche Eigenschaften und Methoden verwendet werden: Um die wahre Größe des Fensters zu erkennen, müssen Sie die Fensterattribute unter Netscape verwenden. den Körper in IE zu erkennen; Um die Fenstergröße zu erhalten, müssen Sie auf die Größe des Stammelements und nicht auf das Element achten.
Die Eigenschaftseigenschaft des Fensterobjekts enthält die interne Breite des aktuellen Fensters. Die Innerheight -Eigenschaft des Fensterobjekts enthält die interne Höhe des aktuellen Fensters.
Das Körperattribut des Dokumentobjekts entspricht dem Tag des HTML -Dokuments. Die Dokumentelementeigenschaft des Dokumentobjekts repräsentiert den Stammknoten des HTML -Dokuments.
document.body.clientHeight repräsentiert die aktuelle Höhe des Fensters, in dem sich das HTML -Dokument befindet. document.body.clientwidth repräsentiert die aktuelle Breite des Fensters, in dem sich das HTML -Dokument befindet.
Eine kleine Nachforschungen über die Größe sichtbarer Fenster in verschiedenen Browsern.
In meinem lokalen Test: Es kann unter IE, Firefox und Oper verwendet werden
document.body.clientwidth
document.body.clientHeight kann erhalten werden, es ist sehr einfach und bequem.
Im Projekt des Unternehmens: Opera wird noch verwendet
document.body.clientwidth
document.body.clientHeight
Aber dh und Firefox verwenden
document.documentElement.clientwidth
document.documentElement.clientHeight
Es stellt sich heraus, dass der W3C-Standard zu Problemen http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd "
Wenn Sie diese Zeile der Seite hinzufügen
In IE: document.body.clientwidth ==> Körperobjektbreite
document.body.clientHeight ==> Körperobjekthöhe
document.documentElement.clientwidth ==> sichtbare Flächenbreite
document.documentElement.clientHeight ==> sichtbare Flächenhöhe
In Firefox: document.body.clientwidth ==> Körperobjektbreite
document.body.clientHeight ==> Körperobjekthöhe
document.documentElement.clientwidth ==> sichtbare Flächenbreite
document.documentElement.clientHeight ==> sichtbare Flächenhöhe?
In Opera: document.body.clientwidth ==> sichtbare Flächenbreite
document.body.clientHeight ==> sichtbare Flächenhöhe
document.documentElement.clientwidth ==> Page -Objektbreite (d. H. Körperobjektbreite plus Randbreite) document.documentElement.clientHeight ==> Seitenobjekthöhe (d. H. Körperobjekthöhe plus Randhöhe)
Wenn es keinen Standard für W3C gibt,
Dann ist dh: document.documentElement.clientwidth ==> 0
document.documentElement.clientHeight ==> 0
Firefox ist: document.documentElement.clientwidth ==> Seitenobjektbreite (d. H. Körperobjektbreite plus Randbreite)
document.documentElement.clientHeight ==> Seitenobjekthöhe (d. H. Körperobjekthöhe plus Randhöhe)
Opera ist: document.documentElement.clientwidth ==> Seitenobjektbreite (d. H. Körperobjektbreite plus Randbreite)
document.documentElement.clientHeight ==> Seitenobjekthöhe (d. H. Körperobjekthöhe plus Randhöhe)
Es ist wirklich ein Ärger. Aus der Sicht des Front-End-Designs und der Entwicklung ist es besser, weniger Objekte und Methoden zu haben, als die neuesten Standards nicht zu verwenden. Wenn Sie jedoch nicht mit dem Trend Schritt halten können, werden Sie niemals ein leitender Designer sein, also müssen wir dieses Wissen immer noch verstehen und beherrschen.