dom.style.height, offsetWidth, scrollWidth, clientWidth区别

可读写

dom.style.width	R/W
offsetWidth	RO
scrollWdith	RO
clientWidth	RO

测试写了一个div , 样式如下

<style type="text/css"> 
   div{
    width: 100px;
    height: 100px;
    margin: 100px;
    padding: 100px;
    border: 30px #ccc solid;
   }
</style> 

    var div = document.getElementById('mydiv');
    console.log("clientWidth" + div.clientWidth);
    console.log("offsetWidth" + div.offsetWidth);
    console.log("scrollWidth" + div.scrollWidth);

结果： 

clientWidth: 300 padding-left+width+padding-right

offsetWidth: 360 border(left)+padding-left+width+padding-right+border(right)

scrollWidth: 300 因为没有左右滚动，故 scrollWidth = clientWidth

兼容FF Chrome 和 IE

 dom.style.width 这个只有内联样式才会有值，且类型时 string 类型，eg: "100px"

所以一般获取元素的宽度时，采用 clientWidth 或　offsetWidth ，在 js 中设置元素宽度时：

var w = dom.offsetWidth;
dom.style.width = w*1.5 + "px";