clientWidth、offsetWidth、scrollWidth的区别

一、概念

　　它们都是Element的属性，表示元素的宽度：

Element.clientWidth 内容+内边距-滚动条-----不包括边框和外边距 == 可视内容
Element.scrollWidth 内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容
Element.offsetWidth 元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件

二、举例

1、仅有横向滚动条的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试scrollWidth、clientWidth、offsetWidth</title>
    <style type="text/css">
        body, html {
            margin: 0px;
            padding: 0px;
        }

        #father {
             300px;
            overflow: auto;
            padding: 10px;
            background: rebeccapurple;
            border: 10px solid red;
            margin: 20px;
        }

        #child {
            height: 100px;
             1000px;
            padding: 10px;
            border: 20px solid #ffcc99;
            margin: 30px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="child"></div>
</div>

<script type="text/javascript">
    var child = document.getElementById("child");
    console.log("child.", window.getComputedStyle(child).width);  //内容的宽度：1000px
    console.log("child.clientWidth:", child.clientWidth);  //内容+内边距-滚动条-----不包括边框和外边距    == 可视内容  1020px
    console.log("child.scrollWidth:", child.scrollWidth);  //内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容   1020px
    console.log("child.offsetWidth:", child.offsetWidth);  //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件      1060px

    var father = document.getElementById("father");
    console.log("father.", window.getComputedStyle(father).width);  //内容的宽度：300px
    console.log("father.clientWidth:", father.clientWidth);  //内容+内边距-滚动条-----不包括边框和外边距   == 可视内容  320px
    console.log("father.scrollWidth:", father.scrollWidth);  //内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容  1100px
    console.log("father.offsetWidth:", father.offsetWidth);  //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件     340px
</script>
</body>
</html>

　　仅有横向滚动条的情况时，父元素受到子元素宽度的影响，其中比较特别的是scrollWidth。

　　父元素的scrollWidth是：子元素的content+padding+border+子元素一边的margin+父元素一边的padding。

2、有横向滚动条和竖向滚动条的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试scrollWidth、clientWidth、offsetWidth</title>
    <style type="text/css">
        body, html {
            margin: 0px;
            padding: 0px;
        }

        #father {
            height: 50px;
             300px;
            overflow: auto;
            padding: 10px;
            background: rebeccapurple;
            border: 10px solid red;
            margin: 20px;
        }

        #child {
            height: 100px;
             1000px;
            padding: 10px;
            border: 20px solid #ffcc99;
            margin: 30px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="child"></div>
</div>

<script type="text/javascript">
    var child = document.getElementById("child");
    console.log("child.", window.getComputedStyle(child).width);  //内容的宽度：1000px
    console.log("child.clientWidth:", child.clientWidth);  //内容+内边距-滚动条-----不包括边框和外边距    == 可视内容  1020px
    console.log("child.scrollWidth:", child.scrollWidth);  //内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容   1020px
    console.log("child.offsetWidth:", child.offsetWidth);  //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件      1060px

    var father = document.getElementById("father");
    console.log("father.", window.getComputedStyle(father).width);  //内容的宽度：285px
    console.log("father.clientWidth:", father.clientWidth);  //内容+内边距-滚动条-----不包括边框和外边距  == 可视内容  305px
    console.log("father.scrollWidth:", father.scrollWidth);  //内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容  1100px
    console.log("father.offsetWidth:", father.offsetWidth);  //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件     340px
</script>
</body>
</html>

　　父元素的width为：父元素的content宽度-滚动条的宽度（大约为15px）

　　父元素的clientWidth为：父元素的content宽度+父元素padding宽度-滚动条宽度（大约为15px）