dom的宽高 clientWidth offsetWidth scrollWidth

2023-12-22 19:33:22
<!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>
码农公寓

相关文章
