Angenommen, obj ist ein HTML-Steuerelement
obj.offsetTop bezieht sich auf die berechnete obere Position von obj relativ zum Layout oder zur übergeordneten Koordinate, die durch das Attribut offsetParent, Ganzzahl, Einheit Pixel, angegeben wird.
obj.offsetLeft bezieht sich auf die berechnete linke Position von obj relativ zum Layout oder der übergeordneten Koordinate, die durch das Attribut offsetParent, Ganzzahl, Einheit Pixel, angegeben wird.
obj.offsetWidth bezieht sich auf die absolute Breite des obj-Steuerelements selbst, mit Ausnahme des Teils, der aufgrund eines Überlaufs nicht angezeigt wird, dh der Breite, die es tatsächlich einnimmt, Ganzzahl, Einheitspixel.
obj.offsetHeight bezieht sich auf die absolute Höhe des obj-Steuerelements selbst, mit Ausnahme des Teils, der aufgrund eines Überlaufs nicht angezeigt wird, dh auf die Höhe, die es tatsächlich einnimmt, Ganzzahl, Einheitspixel.
Lassen Sie uns den zuvor erwähnten offsetParent erklären.
offsetParent Ruft einen Verweis auf das Containerobjekt ab, der die Eigenschaften offsetTop und offsetLeft des Objekts definiert. offsetTop und offsetParent sind sehr kompliziert, verschiedene Browser haben unterschiedliche Interpretationen und die Interpretationen sind unterschiedlich, wenn sie schweben. Daher müssen wir im Allgemeinen nur verstehen, dass die absolute Position des Steuerelements im Browser durch beide ermittelt werden kann.
Die oben genannten Eigenschaften gelten auch in Firefox.
Darüber hinaus bezieht sich das, worüber wir hier sprechen, auf den Attributwert des HTML-Steuerelements, nicht auf document.body. Der Wert von document.body wird in verschiedenen Browsern unterschiedlich interpretiert (tatsächlich werden die meisten Umgebungen durch unterschiedliche Interpretationen des Dokuments verursacht. body , nicht aufgrund unterschiedlicher Interpretationen von Offset)
Wir wissen, dass offsetTop die Position des HTML-Elements vom oberen oder äußeren Element abrufen kann und auch style.top verwendet werden kann. Der Unterschied zwischen den beiden ist:
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.
Das Gleiche gilt für offsetLeft und style.left, offsetWidth und style.width, offsetHeight und style.height.
clientHeight
Jeder hat keine Einwände gegen clientHeight. Sie alle denken, dass es sich um die Höhe des sichtbaren Bereichs des Inhalts im Seitenbrowser handelt ist der Bereich unterhalb der letzten Symbolleiste und oberhalb der Statusleiste. Er hat nichts mit dem Inhalt der Seite zu tun.
offsetHeight
IE und Opera gehen davon aus, dass offsetHeight = clientHeight + Bildlaufleiste + Rand.
NS und FF betrachten offsetHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann.
scrollHeight
IE und Opera betrachten scrollHeight als die tatsächliche Höhe des Webseiteninhalts, die kleiner als clientHeight sein kann.
NS und FF betrachten scrollHeight als die Höhe des Webseiteninhalts, der Mindestwert ist jedoch clientHeight.
Einfach gesagt
clientHeight ist die Höhe des Bereichs, in dem der Inhalt über den Browser angezeigt wird.
NS und FF glauben, dass offsetHeight und scrollHeight beide Webinhaltshöhen sind. Wenn die Webinhaltshöhe jedoch kleiner oder gleich clientHeight ist, ist der Wert von scrollHeight clientHeight und offsetHeight kann kleiner als clientHeight sein.
IE und Opera betrachten offsetHeight als den sichtbaren Bereich der clientHeight-Bildlaufleiste plus Rahmen. scrollHeight ist die tatsächliche Höhe des Webseiteninhalts.
Aus demselben Grund
Die Erklärungen zu clientWidth, offsetWidth und scrollWidth sind die gleichen wie oben, nur die Höhe wird durch die Breite ersetzt.
veranschaulichen
Das Obige basiert auf DTD HTML 4.01 Transitional. Wenn es sich um DTD XHTML 1.0 Transitional handelt, sind diese drei Werte alle gleich und geben die tatsächliche Höhe des Inhalts an. Die meisten neuen Browserversionen unterstützen die Aktivierung verschiedener Interpreter basierend auf dem auf der Seite angegebenen DOCTYPE.
scrollTop ist der „gerollte“ Höhenwert, Beispiel:
Kopieren Sie den Codecode wie folgt:
<div id="p">
<div id="t">Wenn scrollTop für p festgelegt ist, werden diese Inhalte möglicherweise nicht vollständig angezeigt. </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
Da scrollTop für das äußere Element p festgelegt ist, scrollt das innere Element nach oben und der aufgerollte Teil ist scrollTop.
scrollLeft ist ähnlich.
Wir wissen bereits, dass offsetHeight die Breite seines eigenen Elements und scrollHeight die absolute Breite des inneren Elements ist, einschließlich des verborgenen Teils des inneren Elements. Oben beträgt die scrollHeight von p 300 und die offsetHeight von p 100.
scrollWidth ist ähnlich.
IE und FireFox unterstützen es vollständig, während Netscape 8 und Opera 7.6 scrollTop und scrollLeft nicht unterstützen (außer document.body.scrollTop und document.body.scrollLeft).
1.clientHeight, clientWidth:
Diese beiden Eigenschaften zeigen grob die Pixelhöhe und -breite des Elementinhalts an. Theoretisch berücksichtigen diese Messungen keine durch das Stylesheet hinzugefügten Werte.
Ränder, Ränder usw. in Elementen.
2.clientLeft,clientTop:
Diese beiden geben die Dicke des Rahmens um das Element zurück. Wenn Sie keinen Rahmen angeben oder das Element nicht positionieren, ist sein Wert 0.
3. Nach links scrollen, nach oben scrollen:
Wenn das Element scrollbar ist, können Sie diese beiden Eigenschaften verwenden, um zu ermitteln, wie weit das Element in horizontaler und vertikaler Richtung gescrollt wurde. Die Einheit ist Pixel.
Für Elemente, die nicht scrollbar sind, sind diese Werte immer 0.
4. scrollHeight, scrollWidth:
Egal wie viele Objekte auf der Seite sichtbar sind, sie erhalten das Ganze.
5.Stil.links:
Der Versatz des positionierten Elements vom linken Rand des enthaltenden Rechtecks
6.style.pixelLeft:
Gibt den ganzzahligen Pixelwert des linken Randversatzes des positionierten Elements zurück, da der Nicht-Pixelwert des Attributs eine Zeichenfolge mit der Einheit zurückgibt, beispielsweise 30px. Verwenden Sie dieses Attribut, um Werte in Pixeln separat zu verarbeiten.
7.style:posLetf:
Gibt den numerischen Wert des linken Randversatzes des positionierten Elements zurück, unabhängig von den durch das entsprechende Stylesheet-Element angegebenen Einheiten. Da der Nicht-Positionswert des Attributs eine Zeichenfolge zurückgibt, die die Einheit enthält, beispielsweise 1,2em
Nur ein paar Analogien wie top, pixelTop, posTop genügen.
LINKS: ist die Position, die von links nach rechts verschoben wird, d. h. der Abstand zwischen dem Anhänger und dem linken Rand des Bildschirms;
clientLeft gibt den Abstand zwischen dem OffsetLeft-Eigenschaftswert des Objekts und dem tatsächlichen Wert auf der linken Seite des aktuellen Fensters zurück.
offsetLeft gibt den linken Wert des Objekts relativ zum Layout oder den Koordinaten des übergeordneten Objekts zurück. Dabei wird die obere linke Ecke des übergeordneten Objekts als Ursprung der Koordinaten verwendet, und rechts und unten sind die x-Koordinaten in positiver Richtung die X- und Y-Achse.
pixelLeft legt die Position des Objekts relativ zur linken Seite des Fensters fest oder gibt sie zurück
scrollWidth ist die Breite des tatsächlichen Inhalts des Objekts, ohne die Kantenbreite, und ändert sich mit der Menge des Inhalts im Objekt (zu viel Inhalt kann die tatsächliche Breite des Objekts ändern).
clientWidth ist die sichtbare Breite des Objekts, ausgenommen Bildlaufleisten und andere Kanten, und ändert sich mit der Anzeigegröße des Fensters.
offsetWidth ist die sichtbare Breite des Objekts, einschließlich Bildlaufleisten und anderer Kanten, und ändert sich mit der Anzeigegröße des Fensters.
IE6.0, FF1.06+:
clientWidth = Breite + Polsterung
clientHeight = Höhe + Polsterung
offsetWidth = Breite + Innenabstand + Rand
offsetHeight = Höhe + Polsterung + Rand
IE5.0/5.5:
clientWidth = Breite – Rand
clientHeight = Höhenrand
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: ist die Offsetbreite des Elements relativ zum übergeordneten Element. Entspricht Rahmen+Innenraum+Breite
clientwidth: ist die sichtbare Breite des Elements. Entspricht Polsterung+Breite
scrollwidth: ist die Breite des Elements einschließlich des scrollenden Teils.
offsetLeft: Die Position des HTML-Elements relativ zu seinem eigenen offsetParent-Element
scrollLeft: Gibt den Koordinatenwert der aktuellen horizontalen Scroll-Aufgabe zurück und legt ihn fest
Kopieren Sie den Codecode wie folgt:
<input type="button" value="Click" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
Funktion move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>
Als Webseite speichern, ausführen, auf die Schaltfläche klicken und die Bildlaufleiste bewegt sich
Klicken Sie auf das Div, zeigen Sie zuerst die Position von b relativ zu a und dann die Position von a relativ zum Fenster an.