使用 javascript 循环应用 Css？答案

【问题标题】：Apply Css Using javascript Loop?使用 javascript 循环应用 Css？
【发布时间】：2017-01-19 17:36:50
【问题描述】：

我正在尝试使用具有循环的函数将 css 应用于 javascript

this.addcss = function(ele , css){
    for(var k in css)
        ele.style[k] = css[k];
    return true;
}

this.addcss(bodyDiv,{"height":"auto" , "width":"400px auto" , "border":"solid 2px black"});

Div bodyDiv 不为空。

此代码不起作用。我的控制台也没有出现任何错误

我也尝试过这样做，但没有成功：

this.addcss = function(ele , css){
    for(var k in css)
        ele.style.k = css.k;
    return true;
}

原来问题出在元素替换上：

之前我使用此代码将元素替换为其他元素：

var Obj = element;
    if(Obj.outerHTML) { //if outerHTML is supported
        Obj.outerHTML=replacementHtml; ///it's
    }
    else { //if outerHTML is not supported, there is a weird but crossbrowsered trick
        var tmpObj=document.createElement("div");
        tmpObj.innerHTML = element.innerHTML;
        ObjParent=Obj.parentNode; //Okey, element should be parented
        ObjParent.replaceChild(tmpObj,Obj); // here we placing our temporary data instead of our target, so we can find it then and replace it into whatever we want to replace to
        ObjParent.innerHTML = ObjParent.innerHTML.replace(ObjParent.innerHTML, replacementHtml);
    }

不，我试过这个：

element.parentNode.replaceChild(replacement, element);

它奏效了。

感谢所有的答案。

【问题讨论】：

你检查过 DevTools 中的元素吗？
什么是bodyDiv？你是怎么得到那个元素的？
bodyDiv = document.createElement();
你不只是在一个类中设置 css，然后只是将该类添加到元素中吗？

标签： javascript css loops

【解决方案1】：

您的代码运行良好，但是我更改了width 属性，它不能有两个值。

var bodyDiv = document.createElement("DIV");

this.addcss = function(ele , css)
{
    for(var k in css)
        ele.style[k] = css[k];
}

this.addcss(bodyDiv,{"height": "auto", "width":"400px", "border": "solid 2px black"});

document.getElementById("placeholder").appendChild(bodyDiv);

&lt;div id="placeholder"&gt;&lt;/div&gt;

【讨论】：

如果是这样的话：宽度应该是自动的，最大/最小宽度可以设置为400px？增加一些灵活性。也许这就是他想要的方法。

【解决方案2】：

你是否正确设置了bodyDiv的内容，例如

var bodyDiv = document.getElementById("myBodyDiv");

我已经用一个快速的 jsFiddle 证明了这一点：https://jsfiddle.net/kitkit/gh7yxLey/

【讨论】：

【解决方案3】：

尝试这样做：

ele.style=k;
this.addcss = function(ele , css){
    for(var k in css)
        ele.style = k;
    return true;
}

this.addcss(bodyDiv,{"height:auto" , "width:400px auto" , "border:solid 2px black"});

希望对你有帮助。

【讨论】：

【解决方案4】：

这似乎对我有用。这是一个工作小提琴

bodyDiv = document.createElement('div');

this.addcss = function(ele , css){
    for(var k in css)
        ele.style[k] = css[k];
    return true;
}

this.addcss(bodyDiv,{"height":"auto" , "width":"400px" , "border":"solid 2px black"});

document.getElementsByTagName("body")[0].appendChild(bodyDiv);

<body>
  
</body>

我建议仔细检查元素的创建方式和添加到正文的方式。

【讨论】：