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

Das Vue-Projekt implementiert einen grafischen Überprüfungscode

In diesem Artikelbeispiel wird der spezifische Co...

So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)

Derzeit gibt es drei Möglichkeiten, die Mitte ein...

MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort

Spezifische Methode: Schritt 1: Stoppen Sie den M...

Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)

Hintergrund-Threads •Hauptthread Der Kern-Hinterg...

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Float wird häufig im Layout von Webseiten verwend...

So aktualisieren Sie alle Python-Bibliotheken in Ubuntu 18.04 auf einmal

Was ist Pip pip ist ein Python-Paketverwaltungsto...

Detaillierte Erklärung des Unterschieds zwischen MySQL-Normalindex und eindeutigem Index

Inhaltsverzeichnis 1 Begriffliche Abgrenzung 2 Fa...

JavaScript zur Implementierung des Flugzeugkriegsspiels

In diesem Artikel erfahren Sie, wie Sie mit Canva...

Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

Vorwort Als ich heute Xianyu durchsuchte, fiel mi...

PageSpeed ​​Optimierung im Überblick

Ich glaube, dass das Internet zu einem immer unve...

Detaillierte Erläuterung von vier Lösungen für die MySQL Active-Active-Synchronreplikation

Inhaltsverzeichnis Master-Master-Synchronisierung...

Beantworten Sie das Caching-Prinzip von Keep-Alive-Komponenten aus Sicht des Quellcodes

Kommen wir heute gleich zur Sache und sprechen üb...

Beispiel für die Implementierung der Graphql-Schnittstelle in Vue

Hinweis: In diesem Artikel geht es um die grundle...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20 winx64

In diesem Artikel erfahren Sie mehr über die Inst...

Zabbix verwendet einen gemeinsamen PSK-Schlüssel zur Verschlüsselung der Kommunikation zwischen Server und Agent

Seit Zabbix Version 3.0 wird verschlüsselte Kommu...