js 获取元素的宽高为什么是空？

Question

下面这样获取是空的，怎么才能获取到？不用offsetWidth

#div {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    var div = document.getElementById('div')
   console.log(div.style.width)

Answer 1

如果你的元素没有在style里面写样式，那么你通过dom.style.XXX是获取不了的

你可以通过getComputedStyle来获取，具体用法

var div = document.getElementById('div')
window.getComputedStyle(div)
//这样会返回一组css属性

//如果想获取宽度
window.getComputedStyle(div)['width']
//=> '100px' 返回的宽度是带px单位的

Answer 2

div.offsetHeight

Answer 3

el.style.width 只能获取行内样式设置的宽度，可以用el.offsetWidth

Answer 4

style就是element的属性啊, 只有以style方式设置样式才能获取响应值

<div style="width:100px"></div>

而且获取的是'100px', 不一定是实际宽度, 不过style.width是可读写的
实际宽度应该用div.offsetWidth

Answer 5

你这种只能获取写在表情属性style里面的样式，如<div sytle="width:100px"></div>，假如不是可使用[getComputedStyle]1和[currentStyle]2两种方法，具体如下：

var ele = document.getElementById("div");
var style = window.getComputedStyle ? 
    window.getComputedStyle(ele, "") : 
    ele.currentStyle;