HTML -Präzise -Positionierungsattribute: Scrollleft, Scrollwidth, Clientwidth, 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+:
Kopieren Sie den Code wie folgt: 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 Rand
Offsetwidth = Breite
Offseteight = Höhe
Tipp: Das Margin -Attribut in CSS hat nichts mit Clientbreite, Offsetwidth, ClientHeight und Offseteight zu tun
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: document.body.offseteight (einschließlich der Höhe 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
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.
Beispielcode
Die Codekopie lautet wie folgt:
<! DocType>
<html>
<kopf>
<title>
Bitte passen Sie das Browserfenster an
</title>
<meta charset = "utf8">
</head>
<body>
<H2 Align = "Center">
Bitte passen Sie die Größe der Browserfenster an
</h2>
<hr>
<form action = "#" method = "gett" name = "Form1" id = "Form1">
<!-Zeigen Sie die tatsächliche Größe des Browserfensters->
Die tatsächliche Höhe des Browserfensters:
<Eingabe type = "text" name = "aveight" size = "4">
<br>
Die tatsächliche Breite des Browserfensters:
<Eingabe type = "text" name = "Verfügende Width" size = "4">
<br>
</form>
<script type = "text/javaScript">
<!-
var winwidth = 0;
var windheight = 0;
Funktion findDimensions () // Funktion: Erhalten Sie die Abmessungen
{
// Fensterbreite holen
if (window.innnerwidth) winwidth = window.innnerwidth;
sonst if if ((document.body) && (document.body.clientwidth)) winwidth = document.body.clientwidth;
// Fensterhöhe bekommen
if (window.innerHeight) windHeight = window.innerHeight;
sonst if if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight;
// Klicken Sie auf die Fenstergröße, indem Sie den Körper tief im Dokument erkennen, um die Körpergröße zu erhalten
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientwidth) {
winHeight = document.documentElement.clientHeight;
winwidth = document.documentElement.clientwidth;
}
// Das Ergebnis wird für zwei Textfelder ausgegeben
document.form1.availHeight.value = winnheight;
document.form1.availwidth.value = winwidth;
}
findDimensions ();
// Aufrufen der Funktion, um den Wert zu erhalten
window.onResize = findDimensions;
//->
</script>
</body>
</html>
Quellprogramminterpretation
(1) Das Programm erstellt zunächst ein Formular mit zwei Textfeldern, um die aktuelle Breite und Höhe des Fensters anzuzeigen, und der Wert ändert sich mit der Änderung der Fenstergröße.
(2) Im nachfolgenden JavaScript -Code werden zwei Variablen Winwidth und WinHeight zuerst definiert, um die Höhe und Breite des Fensters zu speichern.
(3) Verwenden Sie dann in der Funktion FindDimensions () Fenster.InnerHeight und Fenster.
(4) Wenn Sie dann tief in das Dokument gehen, den Körper erkennen, die Fenstergröße erhalten und in den oben genannten zwei Variablen speichern.
(5) Am Ende der Funktion wird das Ergebnis auf zwei Textfelder ausgegeben, indem auf das Formularelement mit Namen zugegriffen wird.
(6) Füllen Sie am Ende des JavaScript -Codes die gesamte Operation aus, indem Sie die Funktion "FindDimensions () aufrufen.