js元素尺寸和位置，包含clientWidth、offsetWidth、scrollWidth等

初夏 ﻬ發表於2020-12-04
JSclient

一.clientWidth和clientHeight

1.clientWidth：內容+左右內間距
即：clientWidth = width+左右padding
2.clientHeight：內容+上下內間距
即： clientHeigh = height + 上下padding

二.offsetWidth和offsetHeight

1.offsetWidth：內容+內間距+左右邊框
即：offsetWidth = width + 左右padding + 左右boder
2.offsetHeight：內容+內間距+上下邊框
即：offsetHeith = height + 上下padding + 上下boder

三.scrollWidth、scrollHeight、scrollTop和 scrollLeft

1.scrollWidth：可視區域寬度+被隱藏區域寬度
2.scrollHeight：可視區域高度+被隱藏區域高度
3.scrollTop :內容部分頂部到可視區域頂部的距離
4.scrollLeft:內容層左端 到 可視區域左端的距離

四.舉例程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }

        .box
        {
            width: 200px;
            height: 200px;
            margin: 20px;
            padding: 50px;
            border: 10px solid palegreen;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .child
        {
            width: 200px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child">
        內容區域
    </div>
</div>
<script>
    var box = document.querySelector(".box");
    //offsetWidth:邊框+內間距+內容
    console.log(box.offsetWidth);
    console.log(box.offsetHeight);
    //clientWidth:內間距+內容
    console.log(box.clientWidth);
    console.log(box.clientHeight);
    //style.width:行內樣式內容區域的寬
    console.log(box.style.width);
    console.log(box.style.height);
    //scrollHeight:可視區域高度+被隱藏區域高度
    console.log(box.scrollWidth);
    console.log(box.scrollHeight);

    //當前元素相對定位的父元素的偏移距離
    console.log(box.offsetTop);
    console.log(box.offsetLeft);

    //滑動距
    console.log(box.scrollLeft);
    console.log(box.scrollTop);
    console.log(box.scrollHeight - box.clientHeight);
    box.onscroll = function () {
        console.log(this.scrollTop);
        var scTop = this.scrollTop;
        if (this.scrollHeight - box.clientHeight - scTop <= 5) {
            console.log("觸底");
        }
    }
</script>
</body>
</html>

五.執行結果

在這裡插入圖片描述
在這裡插入圖片描述

相關文章