dom的宽高 clientWidth offsetWidth scrollWidth

2020-12-28 10:00:15 阅读：266 来源： 互联网

标签：body scrollWidth console log clientHeight clientWidth div document offsetWidth

<!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>

标签：body,scrollWidth,console,log,clientHeight,clientWidth,div,document,offsetWidth
来源： https://blog.csdn.net/qq_44917015/article/details/111830963

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

dom的宽高 clientWidth offsetWidth scrollWidth