Manchmal wird in Projekten js verwendet, um die Position eines Elements zu ermitteln, um das Element zu lokalisieren. Zunächst wird die Beziehung zwischen scrollWidth, clientWidth und offsetWidth durch Bilder veranschaulicht.
JS erhält eine kurze Einführung in verschiedene Breiten und Höhen:
scrollHeight: Ermitteln Sie die Scrollhöhe des Objekts.
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 der übergeordneten Koordinate ab, die durch die offsetParent-Eigenschaft
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 Der Wert des vertikalen Scrollens
event.clientX document.documentElement.scrollTop Die horizontale Koordinate relativ zum Dokument Das Ausmaß des vertikalen Scrollens
Das Obige bezieht sich hauptsächlich auf den IE. Die Unterschiede in Firefox sind wie folgt:
IE6.0, FF1.06:
clientWidth = Breitenauffüllung
clientHeight = Höhenauffüllung
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)
offsetWidth (Breite des Auffüllrahmens)
Angenommen, obj ist ein HTML-Steuerelement.
obj.offsetTop bezieht sich auf die Position von obj vom oberen oder oberen Steuerelement, Ganzzahl, Einheitspixel.
obj.offsetLeft bezieht sich auf die Position von obj vom linken oder oberen Steuerelement, Ganzzahl, Einheitspixel.
obj.offsetWidth bezieht sich auf die Breite des obj-Steuerelements selbst, Ganzzahl, Einheitspixel. Ermittelt die Breite des sichtbaren Inhalts des Objekts, ohne Bildlaufleisten und Ränder
obj.offsetHeight bezieht sich auf die Höhe des obj-Steuerelements selbst, Ganzzahl, Einheitspixel.
Der Unterschied zwischen offsetWidth und style.width
1. offsetTop gibt eine Zahl zurück, während style.top zusätzlich zur Zahl auch die Einheit px zurückgibt.
2. offsetTop ist schreibgeschützt, während style.top schreibgeschützt ist.
3. Wenn der Top-Stil für das HTML-Element nicht angegeben ist, gibt style.top eine leere Zeichenfolge zurück.
