JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

    <div id="box"></div>
    <スクリプト>
        var box = document.querySelector('#box');
        //1. ボックスの幅と高さを出力します。console.log("width:", box.offsetWidth);
        console.log("高さ:", box.offsetHeight);
        //2. マウス移動イベントをboxbox.addEventListener('mousemove', function (e) {にバインドします。
            //2.1 ボックスのオフセットを取得する var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log("オフセット: (" + 左 + "、" + 上 + ")");
            //2.2 ボックス内のマウスポインターの座標を計算します var x = e.pageX - left;
            var y = e.pageY - 上部;
            console.log("x軸座標: " + x + "、y軸座標: " + y);
        })
    </スクリプト>

    <div></div>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: 水色;
            境界線: 3px 実線の黄色;
        }
    </スタイル>
    <スクリプト>
        //div 要素を取得します。let div = document.querySelector("div");
        //要素の左境界と上境界のサイズを出力します。 console.log("左境界のサイズ:", div.clientLeft);
        console.log("上部の境界線のサイズ:", div.clientTop);
        // 要素自体の幅と高さを出力します（境界線は除く）
        console.log("幅:", div.clientWidth);
        console.log("高さ:", div.clientHeight);
    </スクリプト>

    <div>
        私はコンテンツです...</div><br>
    <button>クリックするとロールされた高さと幅が表示されます</button>
    <スタイル>
        div {
            幅: 200ピクセル;
            高さ: 100px;
            背景色: ピンク;
            /* 配置できない要素をスクロールして表示します*/
            オーバーフロー: スクロール;
        }
    </スタイル>
    <スクリプト>
        //1. ページ内のdiv要素とボタン要素を取得する
        div = document.querySelector("div"); とします。
        button = document.querySelector("button"); とします。
        //2. 独自の高さと幅を出力します。 console.log("Height:", div.scrollHeight);
        console.log("幅:", div.scrollWidth);
        //ボタンのクリックイベントを登録し、クリック後のスクロールの高さと幅を出力します。button.addEventListener("click", function () {
            console.log("スクロールの高さ:", div.scrollTop);
            console.log("スクロール幅:", div.scrollLeft);
        })
    </スクリプト>