Manchmal verwenden Sie im Projekt JS, um Elementpositionen zu erhalten, um Elemente zu lokalisieren. Verwenden Sie zunächst das Bild, um die Beziehung zwischen Scrollwidth, Clientbreite und Offsetwidth zu erklären.
Eine kurze Einführung in JS, die verschiedene Breiten und Höhen erhalten :
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
Die oben genannten bezieht sich hauptsächlich auf IE, und die Unterschiede in Firefox 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)
Offsetwidth (Breite+Polsterung+Rand)
Angenommen, OBJ ist eine HTML -Kontrolle.
Obj.offsettop bezieht sich auf die Position, Ganzzahl, Einheitspixel von OBJ zur oberen oder oberen Kontrolle.
Obj.OffsetLeft bezieht sich auf die Position, Ganzzahl, Einheitspixel von OBJ nach links oder obere Kontrolle.
Obj.Offsetwidth bezieht sich auf die Breite, die Ganzzahl und die Einheitspixel der OBJ -Kontrolle selbst. Erhält die Breite des sichtbaren Inhalts des Objekts, ausgenommen Scroll -Balken und Grenzen;
Obj.offseteight bezieht sich auf die Höhe, die Ganzzahl, die Einheitspixel der OBJ -Kontrolle selbst.
Der Unterschied zwischen Offsetwidth und Style.width
1. Offsettop gibt eine Nummer zurück, während style.top eine Zeichenfolge zurückgibt, die auch das Gerät: PX zusätzlich zur Zahl enthält.
2. Offsettop ist nur schreibgeschützt, während style.top les-schriftlich ist.
3. Wenn für HTML -Elemente kein Top -Stil angegeben ist, gibt Style.Top eine leere Zeichenfolge zurück.