使用 json 设置 css 属性答案

【问题标题】：Set css properties with a json使用 json 设置 css 属性
【发布时间】：2014-07-03 07:33:45
【问题描述】：

我已经按照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]
}

但是当我运行我的脚本时，我得到“Uncaught TypeError: Cannot read property 'style' of null”

【问题讨论】：

您是否真的在页面上有一个元素具有some_id，因为该错误看起来好像el 为空，即页面上没有名为some_id 的任何内容。
你的意思是 JavaScript 对象。那不是 JSON。另外，W3Schools 不是 W3C。
在我的 index.html 中，我有一个 id="some_id" 的 div 元素
您是否在文档加载后运行此脚本？如果不是，那么这就是您看到此错误的原因。此外，所有 for 循环正在做的是将名为“key”的样式属性设置为下一个样式属性。所以在for循环之后你会得到el.style.key == 'red'我认为你想做的是el.style[key] = style[key]

标签： javascript html css json

【解决方案1】：

你应该写：

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

【讨论】：

抱歉，我似乎无法正常工作。我的意思是.. 我要做的就是用 for 循环设置 css 属性，遍历一个对象。
我认为问题在于在循环内的 el.style.key = css[key] 中设置“key”变量。因为当我迭代时 key 代表属性的名称，而 css[key] 代表属性的值（我更改了 css 的样式）
我做到了，请检查示例link并告诉我您的想法

【解决方案2】：

Example Fiddle 您正在尝试实现的内容：

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

【讨论】：

【解决方案3】：

代码示例：

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/

【讨论】：

【解决方案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"
        }
   }

【讨论】：