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

In wenigen Schritten zum einfachen Aufbau eines Windows-SSH-Servers

Das hier erwähnte SSH heißt Security Shell. Ich g...

Detaillierte Erklärung der allgemeinen Verwendung von Pseudoklassen vor und nach in CSS3

Die Pseudoklasse „Before/After“ entspricht dem Ei...

Vue3 kapselt seine eigene Paging-Komponente

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue

Bei der Verwendung von Vue zur Entwicklung von Pr...

js, um eine einfache Produkt-Screening-Funktion zu erreichen

In diesem Artikelbeispiel wird der spezifische JS...

So verstecken Sie RAR-Dateien in Bildern

Sie können dieses Logo lokal als .rar-Datei speic...

Der Unterschied zwischen Name und Wert im Eingabe-Tag

Typ ist das Steuerelement, das für die Eingabe und...

Der neueste Linux-Installationsprozess von Tomcat8

Herunterladen https://tomcat.apache.org/download-...

So implementieren Sie eine geplante Sicherung einer MySQL-Datenbank

1. Erstellen Sie ein Shell-Skript vim backupdb.sh...

Eine einfache Methode zum Zusammenführen und Entfernen doppelter MySQL-Tabellen

Szenario: Die gecrawlten Daten erzeugen eine Date...

Verwenden Sie Tomcat, um das SpringBoot-War-Paket in einer CentOS-Umgebung bereitzustellen

Kriegspaket vorbereiten 1. Bereiten Sie das vorha...

Wissenspunkte zum Prinzip der MySQL-Join-Abfrage

Mysql Join-Abfrage 1. Grundlegende Konzepte Verbi...

Beispiel zum Anzeigen und Ändern der MySQL-Transaktionsisolationsebene

Überprüfen Sie die Transaktionsisolationsebene In...

Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren

Inhaltsverzeichnis 1. Grundlegende Konzepte SÄURE...

Wozu dient das Feld „enctype“ beim Hochladen von Dateien?

Das enctype-Attribut des FORM-Elements gibt den Ko...