1. 程式人生 > >dom.style.height, offsetWidth, scrollWidth, clientWidth區別

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";