scrollWidth、clientWidth 和 offsetWidth

scrollWidth：对象的实际内容宽度，不包括边线宽度，会随对象中内容超过可视区而变大。
clientWidth：对象内容的可视区的宽度，不包括边线宽度，会随对象显示大小的变化而变化。
offsetWidth：对象整体的实际宽度，包括边线宽度，会随对象显示大小的变化而变化。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            border: 50px solid red;
        }
        .inner{
            width: 400px;
            height: 50px;
            background: #000000;
        }
    </style>
</head>
<body>
<div class="outer" id="outer">
    <div class="inner"></div>
</div>
<script>
    var ele = document.getElementById('outer');
    console.log('offsetWidth: ' + ele.offsetWidth);
    console.log('scrollWidth: ' + ele.scrollWidth);
    console.log('clientWidth: ' + ele.clientWidth);
</script>
</body>
</html>

posted @ 2016-07-26 20:38  HeiYe168  阅读(255)  评论(0)  编辑  收藏  举报