scrollWidth,clientWidth,offsetWidth等等的区别

最新推荐文章于 2024-03-29 21:29:37 发布

weixin_33694620

最新推荐文章于 2024-03-29 21:29:37 发布

阅读量119

点赞数

原文链接：https://juejin.im/post/5c453a0de51d4567680e3186

版权

crollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。

clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。

offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

当元素内容没有超过可视区域

元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        border: 1px solid #000;
        width:100px;
        height:200px;
        padding-right: 15px;
        background-color: aquamarine;
        margin-left: 10px;
    }

    </style>
</head>
<body>
    <div>

    </div>
    <script>
    console.log(document.querySelectorAll("div")[0].scrollWidth)  //115
    console.log(document.querySelectorAll("div")[0].clientWidth)  //115
    console.log(document.querySelectorAll("div")[0].offsetWidth)  //117
    </script>
</body>
</html>
复制代码

当元素内容超过可视区域

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        border: 1px solid #000;
        width:100px;
        height:200px;
        padding-right: 15px;
        background-color: aquamarine;
        margin-left: 10px;
        overflow: hidden;
        overflow-x: scroll
    }

    </style>
</head>
<body>
    <div>
sdsssssssssssssssssssssssssssdssssssssssssssssssssssssss
    </div>
    <script>
    console.log(document.querySelectorAll("div")[0].scrollWidth)  //470
    console.log(document.querySelectorAll("div")[0].clientWidth)  //115
    console.log(document.querySelectorAll("div")[0].offsetWidth)  //117
    </script>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5c453a0de51d4567680e3186

weixin_33694620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scrollWidth,clientWidth,offsetWidth等等的区别

crollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。当元素内容没有超过可视区域元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。scrollWidth=...
复制链接

扫一扫