JavaScript-OffsetParent-Fallstudie

JavaScript-OffsetParent-Fallstudie

1. Definition von offsetParent: offsetParent ist das übergeordnete Element, das dem untergeordneten Element am nächsten ist und positioniert wurde (Position: absolut relativ fest). Wenn im übergeordneten Element keine Positionierung vorhanden ist, ist offsetParent: Body-Element

2. Laut Definition gibt es folgende Situationen

  1. Wenn das Element selbst eine feste Positionierung hat und das übergeordnete Element keine Positionierung, ist das Ergebnis von offsetParent null (body in Firefox, null in anderen Browsern).
  2. Das Element selbst hat keine feste Positionierung und das übergeordnete Element hat keine Positionierung, und offsetParent ist das <body>-Element
  3. Das Element selbst hat keine feste Positionierung, und das übergeordnete Element hat eine Positionierung, und offsetParent ist das übergeordnete Element, das ihm am nächsten ist und positioniert wurde.
  4. Der OffsetParent des <body>-Elements ist null
<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
</Kopf>
 
<Text>
 <div id="test1" style="position:fest"></div>
 
 <div id="test2"></div>
 
 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>
 
<Skript>
    /*
    [1] Wenn das Element selbst eine feste Positionierung hat und das übergeordnete Element keine Positionierung, ist das Ergebnis von offsetParent null (body in Firefox, null in anderen Browsern)
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】 Das Element selbst hat keine feste Positionierung und das übergeordnete Element hat keine Positionierung und offsetParent ist das <body>-Element */
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】 Das Element selbst hat keine feste Positionierung und das übergeordnete Element hat keine Positionierung und offsetParent ist das <body>-Element */
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】Der OffsetParent des <body>-Elements ist null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</Skript>
</body>
 
</html>

3. Es gibt den folgenden Fehler in IE7 bezüglich des offsetParent der Positionierung

[1] Wenn das Element selbst absolut oder relativ positioniert ist und das übergeordnete Element kein positioniertes Element hat, ist offsetParent in IE7-Browsern <html>

<div id="test1" style="position:absolute;"></div>    
<Skript>
//IE7-Browser gibt <html> zurück, andere Browser geben <body> zurück
Konsole.log(test1.offsetParent);
</Skript>
<div id="test2" style="position:relative;"></div>    
<Skript>
//IE7-Browser gibt <html> zurück, andere Browser geben <body> zurück
Konsole.log(test2.offsetParent);
</Skript>
<div id="test3" style="position:fest;"></div>    
<Skript>
//Firefox berücksichtigt das Problem der festen Positionierung nicht und gibt <body> zurück, während andere Browser null zurückgeben
Konsole.log(test3.offsetParent);
</Skript>

【2】Wenn das übergeordnete Element ein Element hat, das haslayout auslöst oder positioniert ist, und das Ergebnis von offsetParent das übergeordnete Element ist, das dem Element am nächsten ist und positioniert ist oder haslayout auslöst

<div id="div0" style="display:inline-block;">
    <div id='Test'></div>    
</div>
<Skript>
//IE7-Browser gibt <div id="div0"> zurück, andere Browser geben <body> zurück
Konsole.log(test.offsetParent);
</Skript>
<div id="div0" style="position:absolute;">
    <div id="div1" style="anzeige:inline-block;">
        <div id='Test'></div>    
    </div>    
</div>
<Skript>
//IE7-Browser gibt <div id="div1"> zurück, andere Browser geben <div id="div0"> zurück
Konsole.log(test.offsetParent);
</Skript>
<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='Test'></div>    
    </div>    
</div>
<Skript>
//Alle Browser geben <div id="div1"> zurück
Konsole.log(test.offsetParent);
</Skript>

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des JavaScript-OffsetParent-Falls. Weitere relevante JavaScript-OffsetParent-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Analyse der JS OffsetParent-Eigenschaft
  • Unterschied zwischen js parentElement und offsetParent
  • Javascript Drag Series Artikel 1 OffsetParent-Eigenschaft

<<:  Mysql8.0 verwendet Fensterfunktionen, um Sortierprobleme zu lösen

>>:  Nginx beschränkt den IP-Zugriff auf bestimmte Seiten

Artikel empfehlen

So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox

1. Einleitung Vagrant ist ein Tool zum Erstellen ...

Detailliertes Beispiel für die Verwendung von CSS zur Verschönerung von HTML-Formular-Steuerelementen (Formularverschönerung)

1. Grundlegende Syntaxstruktur der HTML-Senden- u...

So konfigurieren Sie Linux CentOS für die regelmäßige Ausführung von Skripten

Oft möchten wir, dass der Server regelmäßig ein S...

Installation des MySQL 5.7.22-Binärpakets und installationsfreie Version – Windows-Konfigurationsmethode

Der folgende Code stellt die Installationsmethode...

jQuery implementiert Akkordeoneffekte

Dieser Artikel gibt Ihnen den spezifischen Code v...

So deaktivieren Sie die Eslint-Erkennung in Vue (mehrere Methoden)

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

MySQL-Unterabfragen und gruppierte Abfragen

Inhaltsverzeichnis Überblick Unterabfragen Untera...

Implementierung einer coolen 3D-Würfeltransformationsanimation in CSS3

Ich liebe das Programmieren, es macht mich glückl...

Erstellen Sie einen benutzerdefinierten Taskleistenindikator für Ihre Aufgaben unter Linux

Auch heute noch sind Taskleistensymbole ein magis...

Gründe und Optimierungslösungen für langsames MySQL-Limit-Paging mit großen Offsets

In MySQL verwenden wir normalerweise ein Limit, u...

Der gesamte Prozess der Konfiguration von Hive-Metadaten für MySQL

Gehen Sie im Hive-Installationsverzeichnis in das...

Lösung zum automatischen Stoppen des MySQL-Dienstes

Dieser Artikel stellt hauptsächlich die Lösung fü...

So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)

So zentrieren Sie ein Element im Browserfenster H...

Zusammenfassung verschiedener Replikationsmethoden für die MySQL Master-Slave-Replikation

Asynchrone Replikation Die MySQL-Replikation erfo...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22

Dieser Artikel dokumentiert die Installation und ...