dom的寬高 clientWidth offsetWidth scrollWidth

Ｙｏｕｎｇ發表於2020-12-28
client
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            width: 50px;
            height: 50px;
            background-color: red;
            padding: 10px;
            border: 2px solid black;
            overflow: scroll;
        } */
    </style>
</head>

<body>
    <!-- <div style="height: 3000px;">
        123132123
        13212313
        12313
        123131232332
    </div> -->
    <script>
        /* 
        clientWidth
        offsetWidth
        scrollWidth
        新增到頁面中才可以獲取到的
        並且圖片這些載入元素無法獲取 等頁面生成之後才會開始載入 （非同步的原因）
        */

        // var div = document.querySelector('div')
        //    var div = document.createElement("div")
        //    div.style.width = "50px"
        //    div.style.height = "50px"
        //    div.style.backgroundColor = "red"
        //    var img = document.createElement("img");
        //    img.src = "../img/a.png"//非同步
        //    document.body.appendChild(img);

        //    console.log( img.clientHeight )// 無法獲取 非同步原因
        //    console.log( div.clientHeight )// 無法獲取 
        //    document.body.appendChild(div);
        //    console.log( div.clientHeight )// 放入document中 就可以獲取了
        //    console.log('aaa') //先列印aaa 後面載入圖片 這就是非同步

        //    同步 上一步執行完成在執行下一步 就是同步
        // console.log(getComputedStyle(div).width) //獲取計算後的樣式 樣式的值 50px 連padding都沒有的
        // console.log(div.clientWidth) //數值 width + padding - 17px(滾動條的寬度) 肉眼可見的
        // console.log(div.offsetWidth) //數值 width + padding + border 實際div的佔位寬高 實際佔位
        // console.log(div.scrollWidth) //數值  實際內容寬度+padding

        // scrollTop 距離容器的高度
        //  旁邊滾動條的 高度 是由比例的 可以計算

        // 元素以外的寬高 頁面寬高
        // console.log( document.body.clientHeight )

        // 獲取的是body的寬高
        // console.log( document.body.clientWidth,document.body.clientHeight)//body

        // 獲取的是頁面的可視寬高  不會內容的撐大而變化
        // console.log( document.documentElement.clientWidth,document.documentElement.clientHeight )// html

        // offsetWidth 一樣 offsetWidth
        // console.log( document.body.clientHeight,document.body.offsetHeight,document.body.scrollHeight )

        // 可視寬度（clientWidth）   內容寬度(offsetWidth)



        // 1.內容高度 body的 clientWidth offsetWidth; document.body.clientWidth document.body.clientHeight
        // 2.可視寬高 看html  document.documentElement.clientWidth document.documentElement.clientHeight
        // 3.有滾動條時 內容寬高 document.body.scrollHeight  document.body.scrollWidth;

        console.log( document.body.clientWidth , document.body.clientHeight )
        console.log( document.documentElement.clientWidth , document.documentElement.clientHeight )
        console.log( document.body.scrollWidth , document.body.scrollHeight )
    </script>
</body>

</html>

相關文章