SOURCE

console 命令行工具 X clear

                    
>
console
let box = document.querySelector('.box');
        console.log(box.style.width, 'style.width'); // 300px style.width
        // 1.通过node.style 只能获取行内样式
        console.log(box.offsetWidth, 'offsetWidth'); // 340
        // 2.可以通过node.offsetWidth 获取任意样式表中的样式
        box.style.width = "100px";
        box.offsetWidth = "400"
        // 3.style 可读写     offsetWidth 只读

        // 返回的内容也不一样
        // style 带单位的字符      offsetWidth 不带单位的 num
        // style  只返回 width
        // offsetWidth 包含了width + padding + border
<div class="box" style="width: 300px; padding: 10px; border: 10px solid black;"></div>
.box{
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: 10px solid black;
    padding: 10px;
}