javascript - document.body.style 是什么奇怪的对象

Question

document.body.style(or element.style) 是 CSSStyleDeclaration 的一个实例，我想用这个属性来检查浏览器是否支持一些指定的 css 属性

像这样

if("border-width" in document.body.style){
    //do sth. if supported
}

但是:

我发现了一件奇怪的事

document.body.style["border-width"] //""
document.body.style.hasOwnProperty("border-width") //true
"border-width" in document.body.style //true

//iterating from Object
for( var i in document.body.style){
    if( i == "border-width" ){
        console.log("found it")
    }
}

但上次无法记录“found it”，这意味着我们在迭代中没有找到“border-width”。

为什么？

即使 document.body.style[1111] 返回 ""但不是 undefined ，1111 也是一个属性吗？

好奇怪好困惑。

Answer 1

如果你想测试一个属性是否可用，使用typeof。例如

var out = document.getElementById('out');

['background', 'backgroundColor', 'background-color', 'backgroundColour',
'-moz-border-radius', '-webkit-border-radius'].forEach(function(prop) {
  var li = document.createElement('li');
  li.innerHTML = '<code>' + prop + '</code> is ' + (typeof out.style[prop] === 'undefined' ? '<strong>not</strong> ' : '') + 'available';
  out.appendChild(li);
});

<ul id="out"></ul>