js 元素获取的比较 ： 元素.clientWidth, 元素.offsetWidth, getComputedStyle(元素).width

<style>
    .box{ width: 100px; height: 100px; border:3px solid #000; }
</style>

<div class = "box">盒子</div>

<script>

    var box = document.querySelector('.box');

    // 输出元素的宽度值，不包含边框占据的位置
    console.log(box.clientWidth);  ==>  输出 100 , 类型为number

    // 输出元素的宽度值，包含边框占据的位置
    console.log(box.offsetWidth);  ==>  输出 106 , 类型为number

    // 输出元素的宽度设置，不包含边框占据的位置
    console.log(getComputedStyle(box).width);  ==>  输出 100px , 类型为字符串

</script>