为什么我不能用这个函数通过javascript设置z-index？ （我知道camelcase）

Question

您好我想更改DOM元素的z-index，所以我使用了一个函数来实现。该函数适用于许多属性，但不适用z-index我正在使用Dev Tools，我可以看到它甚至没有在元素上设置，我不知道为什么。

使用Javascript：

    function setStyle(obj, propertyObj) {
        for (var property in obj) {
             if(obj.hasOwnProperty(property)){
                obj.style[property] = propertyObj[property];
            }
        }
    }
    var img = new Image();
    img.onload = function() {
       setStyle(this, {'zIndex':'-5'}) ;
    };
    img.src = 'test.jpg'

修改

感谢您的好答案。

我在某个地方的CSS代码中应用了border，所以当我循环访问对象时，属性border正在被更改（但z-index的情况并非如此）。

Answer 1

function setStyle(el, propertyObj) {
    for (var property in propertyObj){
          el.style[property] = propertyObj[property]
    }
 }

var img = new Image();
img.onload=function(){
   setStyle(this,{
      'zIndex':"999"
   });
};

Answer 2

if(obj.style && obj.style.hasOwnProperty(property)){
    obj.style[property] = propertyObj[property];
}

Answer 3

使用JS设置z-index就像这样简单：

document.getElementById('IDHERE').style.zIndex = "2000";

Answer 4

您有2个错误：

你的for in loop循环遍历图像对象，而不是属性对象。

您的hasOwnProperty检查错误（且不必要）。您正在检查obj是否有您的样式道具，而不是样式对象是否具有样式道具

应该是：

function setStyle(obj, propertyObj) {
    for (var property in propertyObj) {
        obj.style[property] = propertyObj[property];
    }
}

Answer 5

还可以添加另一个答案......

typeof obj.style === 'object' && Object.keys(propertyObj).forEach(function(key) {
    obj.style[key] = propertyObj[key];
});

IMO，Object.keys优于for ... in循环，因为它不受Object原型注入问题的影响。

这也可确保obj具有style属性。

更新

因为有些人正在进行微优化，所以这里没有Array.forEach

if (typeof obj.style === 'object') {
    var keys = Object.keys(propertyObj);
    for (var i = 0, l = keys.length; i < l; i++) {
        var key = keys[i];
        obj.style[key] = propertyObj[key];
    }
}