使用JSON设置CSS属性

Question

我按照w3c的说明用JavaScript设置元素的CSS属性，但我不知道如何使用JSON对象来实现。

我的代码如下：

var style = {
    position:'fixed',
    top:0,
    right:0,
    bottom:0,
    left:0,
    background:'red'
}


var el = document.getElementById( 'some_id' );
for( var key in style ){
    el.style.key = style[key]
}

但是当我运行我的脚本时，我收到了“未捕获的TypeError：无法读取null的属性 'style'” 的错误信息。

- Franco Aguilera

---

你的页面上是否真的有一个元素的ID为some_id，因为这个错误看起来好像el是空的，也就是说页面上没有叫做some_id的元素。 - OJay

你的意思是JavaScript对象。那不是JSON。另外，W3Schools不是W3C。 - BoltClock

在我的 index.html 文件中，我有一个 id 为 "some_id" 的 div 元素。 - Franco Aguilera

你是在文档加载后运行这个脚本吗？如果不是，那么这就是为什么你看到这个错误的原因。此外，for循环所做的只是将style中的一个属性称为“key”，然后将其设置为下一个样式属性。因此，在for循环之后，你最终会得到el.style.key == 'red'，我认为你想要做的是el.style[key] = style[key]。 - Ballbin

Answer 1

代码示例：

Object.assign(document.querySelector('.my-element').style, {
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    background: 'red'
})

JSFiddle上的示例：

https://jsfiddle.net/b6hexafL/4/

- ujeenator

Answer 2

你应该写：

for (var key in style) { 
    el.style[key] = style[key]
}

- 雪月秋水

---

抱歉，伙计们，我的工作好像出了问题。我的意思是...我只是想通过一个循环遍历对象来设置CSS属性。 - Franco Aguilera

我认为问题在于循环内设置 "key" 变量的 el.style.key = css[key]。 因为当我迭代 key 时，它代表属性的名称，而 css[key] 则代表属性的值（我将样式更改为 css）。 - Franco Aguilera

请检查这个示例链接，告诉我你的看法。我已经做好了。 - 雪月秋水

Answer 3

你正在尝试实现的示例 Fiddle

for(var key in s) {
    el.style[key] = s[key]
}

- light

Answer 4

如果您想在加载时生成一个或多个iframe，则这似乎很有效：

    var dir,name,ele,style,k,v;
    dir = ...
    name = ...
    ele = $(document.createElement("iframe"));
    $("#layout",parent.document).append(ele);
    ele.attr({
        src: dir +"/" +name +".html",
        id: dir +name
    });
    style = nset[dir].monitor[name].css;
    $.each(style,function(k,v){
        ele.css(k,v)
    });
    ele.load(function(){
        //next iframe or start function ... can use loaded frames
    });

带有如下相关部分的nset：

 "lert": {
        "css":{
            "left": 100 ,
            "top": 0 ,
            "width": 320 ,
            "height": 480 ,
            "display": "none",
            "overflow": "hidden",
            "backgroundColor":"white"
        }
   }

- Chris Glasier