Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript

    <div id="box"></div>
    <Skript>
        var box = document.querySelector('#box');
        //1. Breite und Höhe der Box ausgeben console.log("width:", box.offsetWidth);
        console.log("Höhe:", box.offsetHeight);
        //2. Binden Sie das Mausbewegungsereignis an boxbox.addEventListener('mousemove', function (e) {
            //2.1 Den Versatz der Box abrufen var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log("Versatz: (" + links + "," + oben + ")");
            //2.2 Berechnen Sie die Koordinaten des Mauszeigers in der Box var x = e.pageX - left;
            var y = e.pageY – oben;
            console.log("x-Achsenkoordinate: " + x + ", y-Achsenkoordinate: " + y);
        })
    </Skript>

    <div></div>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            Rand: 3px durchgehend gelb;
        }
    </Stil>
    <Skript>
        //Div-Element abrufen let div = document.querySelector("div");
        //Gib die Größe des linken und oberen Rands des Elements aus console.log("Größe des linken Rands:", div.clientLeft);
        console.log("Größe des oberen Rahmens:", div.clientTop);
        // Breite und Höhe des Elements selbst ausgeben (ohne Ränder)
        console.log("Breite:", div.clientWidth);
        console.log("Höhe:", div.clientHeight);
    </Skript>

    <div>
        Ich bin der Inhalt ...</div><br>
    <button>Klicken, um die gerollte Höhe und Breite zu erhalten</button>
    <Stil>
        div {
            Breite: 200px;
            Höhe: 100px;
            Hintergrundfarbe: rosa;
            /* Scrollen Sie durch die Elemente, die nicht platziert werden können, um sie anzuzeigen*/
            Überlauf: scrollen;
        }
    </Stil>
    <Skript>
        //1. Holen Sie sich die Div- und Button-Elemente auf der Seite
        let div = document.querySelector("div");
        let button = document.querySelector("Schaltfläche");
        //2. Gibt die eigene Höhe und Breite aus console.log("Height:", div.scrollHeight);
        console.log("Breite:", div.scrollWidth);
        //Registriere ein Klickereignis für die Schaltfläche und gib die Höhe und Breite des Bildlaufs nach dem Klicken aus button.addEventListener("click", function () {
            console.log("Scrollhöhe:", div.scrollTop);
            console.log("Scrollbreite:", div.scrollLeft);
        })
    </Skript>