Question

我正在尝试使用具有循环

的函数将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);

它有效。

感谢所有答案。

Answer 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);

<div id="placeholder"></div>

Answer 2

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

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

我已经证明这适用于快速的jsFiddle：https://jsfiddle.net/kitkit/gh7yxLey/

Answer 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"});

希望它有所帮助。

Answer 4

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

＆＃13;

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);

＆＃13;

<body>
  
</body>

＆＃13;

我建议仔细检查元素的创建方式以及它附加到正文的方式。

使用javascript循环应用Css？

4 个答案: