JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

    <スタイル>
        *{
            マージン: 0px;
            パディング: 0px;
        }
        。父親{
            位置: 相対的;
            左マージン: 50px;
            上マージン: 10px;
            幅: 200ピクセル;
            高さ: 200px;
            背景色: 茶色;
        }
        。息子{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: コーンフラワーブルー;
        }
    </スタイル>
</head>
<本文>
    <div class="父">
        <div class="son"></div>
    </div>
    <スクリプト>
        var 父親 = document.querySelector('.父親');
        var 息子 = document.querySelector('.息子')
        console.log('father.offsetLeft',father.offsetLeft);
        console.log('father.offsetTop',father.offsetTop);
        console.log('son.offsetWidth',son.offsetWidth);
        console.log('son.offsetHeight',son.offsetHeight);
    </スクリプト>
</本文>

<スタイル>
        。箱{
            幅: 200ピクセル;
            高さ: 200px;
            背景色: darkorchid;
            境界線: 20px 実線 #ccc;
        }
    </スタイル>
</head>
<本文>
    <div class="box"></div>
</本文>
<スクリプト>
    var ボックス = document.querySelector('.box')
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    コンソールにログ出力します。
</スクリプト>

 <スタイル>
        。箱{
            幅: 200ピクセル;
            高さ: 200px;
            背景色: darkorchid;
            境界線: 20px 実線 #ccc;
        }
    </スタイル>
</head>
<本文>
    <div class="box"></div>
</本文>
<スクリプト>
    var ボックス = document.querySelector('.box')
    console.log('box.scrollWidth:'+box.scrollWidth);
    console.log('box.scrollHeight:'+box.scrollHeight);
    console.log('box.scrollLeft:'+box.scrollLeft);
    コンソールにログ出力します。
</スクリプト>

 <div class="box">
   Wang Huan はフロントエンドを勉強しています<br><br>
   Wang Huan はフロントエンドを勉強しています<br><br>
   Wang Huan はフロントエンドを勉強しています<br><br>
   Wang Huan はフロントエンドを勉強しています<br><br>
   Wang Huan はフロントエンドを勉強しています<br><br>
   Wang Huan はフロントエンドを勉強しています<br><br>
   王歓はフロントエンドを学んでいる

 var ボックス = document.querySelector('.box')
    box.addEventListener('スクロール',function(){
        コンソールにログ出力します。
    })