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

来源：互联网发布：python form import 编辑：程序博客网时间：2024/04/27 17:17

可读写dom.style.width R/WoffsetWidth ROscrollWdith ROclientWidth 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";

0 0