JavaScript implementiert drei gängige Webeffekte (Offset, Client, Scroll-Serie).

1. Elementversatzserie

Offset wird als Versatz übersetzt. Wir verwenden die Offset-Reihe verwandter Attribute, um die Position (Versatz), Größe usw. des Elements dynamisch abzurufen.

• Ermitteln Sie die Position eines Elements relativ zu seinem positionierten übergeordneten Element.
• Holen Sie sich die Größe (Breite und Höhe) des Elements selbst
• Hinweis: Die zurückgegebenen Werte haben keine Einheiten.

Allgemeine Attribute des Offsets sind:

Beispiel: Angenommen, es gibt eine untergeordnete und eine übergeordnete Box, denen eine bestimmte Größe zugewiesen wurde. Sehen wir uns an, wie diese Eigenschaften erzielt werden:

    <Stil>
        *{
            Rand: 0px;
            Polsterung: 0px;
        }
        .Vater{
            Position: relativ;
            Rand links: 50px;
            Rand oben: 10px;
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: braun;
        }
        .Sohn{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Kornblumenblau;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Vater">
        <div Klasse="Sohn"></div>
    </div>
    <Skript>
        var Vater = document.querySelector('.vater');
        var son = document.querySelector('.son')
        console.log('Vater.OffsetLeft',Vater.OffsetLeft);
        console.log('Vater.OffsetTop',Vater.OffsetTop);
        console.log('son.offsetWidth',son.offsetWidth);
        console.log('son.offsetHeight',son.offsetHeight);
    </Skript>
</body>

Das Druckergebnis ist:

Wir wissen, dass der Versatz uns dabei helfen kann, die Größe und das übergeordnete Element eines Elements zu ermitteln, aber das Stilattribut kann auch verwandte Attribute abrufen. Was ist also der Unterschied zwischen ihnen?

offset

• Offset kann den Stilwert in jedem Stylesheet abrufen
• Die durch die Offset-Reihe erhaltenen Werte sind einheitenlos.
• offsetWidth beinhaltet padding+border+width
• OffsetWidth und andere Eigenschaften sind schreibgeschützte Eigenschaften, die nur abgerufen, aber nicht zugewiesen werden können.

style

• style.width erhält einen String mit Einheiten
• style.width erhält den Wert ohne Polsterung und Rahmen
• style.width ist eine Lese-/Schreibeigenschaft, die abgerufen oder zugewiesen werden kann

2. Element Sichtbarer Bereich Client-Serie

Client wird mit Klient übersetzt. Wir verwenden die Client-Reihe verwandter Attribute, um relevante Informationen über den sichtbaren Bereich des Elements zu erhalten. Die Rahmengröße, Elementgröße usw. des Elements können dynamisch über die zugehörigen Eigenschaften der Client-Reihe abgerufen werden.

Geben Sie beispielsweise bei einer Box mit einem Rand diese Eigenschaften zurück und sehen Sie sich das Ergebnis an.

<Stil>
        .Kasten{
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: dunkle Orchidee;
            Rand: 20px durchgezogen #ccc;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box"></div>
</body>
<Skript>
    var box = document.querySelector('.box')
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientTop:'+box.clientTop);
</Skript>

Das Ergebnis ist:

Es kann festgestellt werden, dass die von der Client-Serie erhaltene Boxgröße den Boxrand nicht umfasst.

3. Element-Scrolling-Reihe

Scrollen bedeutet Scrollen. Wir können die zugehörigen Eigenschaften der Scroll-Reihe verwenden, um die Größe des Elements, die Scroll-Distanz usw. dynamisch abzurufen.

Drucken wir beispielsweise die Bildlaufreiheneigenschaften der Box im obigen Beispiel aus, um das Ergebnis anzuzeigen.

 <Stil>
        .Kasten{
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: dunkle Orchidee;
            Rand: 20px durchgezogen #ccc;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box"></div>
</body>
<Skript>
    var box = document.querySelector('.box')
    console.log('box.scrollWidth:'+box.scrollWidth);
    console.log('box.scrollHeight:'+box.scrollHeight);
    Konsole.log('box.scrollLeft:'+box.scrollLeft);
    console.log('box.scrollTop:'+box.scrollTop);
</Skript>

Das Ergebnis ist:

Wir stellen fest, dass die Höhe und Breite der Box, die wir erhalten, unsere gegebenen Werte sind, die mit den von der Client-Reihe erhaltenen Werten übereinstimmen. Was ist also der Unterschied zwischen ihnen? Nun fügen wir der Box Inhalt hinzu, der die Höhe der Box überschreitet:

 <div Klasse="Box">
   Wang Huan studiert Front-End<br><br>
   Wang Huan studiert Front-End<br><br>
   Wang Huan studiert Front-End<br><br>
   Wang Huan studiert Front-End<br><br>
   Wang Huan studiert Front-End<br><br>
   Wang Huan studiert Front-End<br><br>
   Wang Huan lernt Frontend

Das Druckergebnis ist:

Es ist ersichtlich, dass die Höhe des gedruckten Felds größer geworden ist. Tatsächlich bezieht sich dieser Wert auf die tatsächliche Höhe des Felds nach dem Hinzufügen des Textes.

Sie werden auch feststellen, dass die zweimal gedruckten Werte von box.scrollLeft und box.scrollTop beide 0 sind. Was bedeutet das?

Jetzt verwenden wir overflow:auto, um den Inhalt außerhalb der Box als Bildlaufleiste anzuzeigen, und fügen ihm dann ein Bildlaufereignis hinzu, wie unten gezeigt:

 var box = document.querySelector('.box')
    box.addEventListener('scrollen',Funktion(){
        console.log('box.scrollTop:'+box.scrollTop);
    })

Die Wirkung ist;

Es wurde festgestellt, dass sich der erhaltene Wert beim Scrollen ändert. Tatsächlich gibt box.scrollTop die obere Distanz zurück, die weggescrollt wird, wie in der folgenden Abbildung dargestellt:

Oben finden Sie Einzelheiten zur Implementierung von drei gängigen Webeffekten (Offset, Client, Scroll-Serie) mit JavaScript. Weitere Informationen zu JavaScript-Webeffekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!