offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

最新推荐文章于 2022-03-22 10:22:35 发布

cq_csdn_399

最新推荐文章于 2022-03-22 10:22:35 发布

阅读量1.7k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_29738977/article/details/86697246

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

offsetWidth/offsetHeight返回值包含content + padding + border ，如果有滚动条，也不包含滚动条

clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .container{
                overflow-y: scroll;
                height: 100px;
                width: 100px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="container" id="container">
            你还你还你还你还你还你还你还你还你还你还你还你还你还你还
            你还你还你还你还你还你还你还你还你还你还你还你还你还你还
        </div>
    </body>
    <script>
    var scrollHeight=  document.getElementById('container').scrollHeight;
    var clientHeight=document.getElementById('container').clientHeight;
    var offSetHeight=document.getElementById('container').offsetHeight;
    
    console.log("scrollHeight,"+scrollHeight)   
    console.log("clientHeight,"+clientHeight)
    console.log("offSetHeight,"+offSetHeight)
    
    </script>
    </html>

在这里插入图片描述

cq_csdn_399

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border ，如果有滚动条，也不包含滚动条clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸 &lt;!...
复制链接

扫一扫

专栏目录