dom.style.height, offsetWidth, scrollWidth, clientWidth區別
阿新 • • 發佈:2019-01-25
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);
相容FF Chrome 和 IE
dom.style.width 這個只有內聯樣式才會有值,且型別時 string 型別,eg: "100px"
所以一般獲取元素的寬度時,採用 clientWidth 或 offsetWidth ,在 js 中設定元素寬度時:
var w = dom.offsetWidth;
dom.style.width = w*1.5 + "px";