Question

我有一些JavaScript代码可以创建一些div元素并设置它们的CSS属性。因为我想将CSS逻辑与我的JavaScript代码分离，并且因为CSS在自己的.css文件中更容易阅读，所以我想设置我的元素的CSS className，然后动态地注入一些值进入已定义的CSS属性。

以下是我想做的事情：

style.css：

.myClass { 
    width: $insertedFromJS 
}

script.js：

var myElement = document.createElement("div");
myElement.className = "myClass";

我想做这样的事情，但那时myElement.style.width是空的

myElement.style.width.replaceAll("$insertedFromJS", "400px");

我认为我的问题是，在调用myElement.className = "myClass"之后，CSS尚未应用。

Answer 1

如果我理解你的问题，听起来你正试图在你的css文件中设置占位符文本，然后使用javascript来解析你想要为该类设置的css值的文本。你不能以你想要的方式做到这一点。为了做到这一点，你必须从dom中获取CSS文件的内容，操作文本，然后然后将其保存回DOM。但这是一个非常复杂的方式去做一些......

myElement.style.width = "400px";

...可以在几秒钟内完成。我知道它并没有真正解决从js中解耦css的问题，但是你可以做的就是整个。毕竟，你是想动态设置css。

根据您要完成的任务，您可能希望尝试定义多个类，只需更改js中的className属性。

Answer 2

设置样式，可以完成定义内页样式声明。

这就是我的意思

var style = document.createElement('style');
style.type = 'text/css';
style.cssText = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById('someElementId').className = 'cssClass';

然而，修改它的部分可能比你想象的要复杂很多。一些正则表达式解决方案可能做得很好。但是我找到了另一种方式。

if (!document.styleSheets) return;
var csses = new Array();
if (document.styleSheets[0].cssRules)  // Standards Compliant {
   csses = document.styleSheets[0].cssRules;
}
else {         
   csses = document.styleSheets[0].rules;  // IE 
}
for (i=0;i<csses.length;i++) {
   if ((csses[i].selectorText.toLowerCase()=='.cssClass') || (thecss[i].selectorText.toLowerCase()=='.borders'))
   {
     thecss[i].style.cssText="color:#000";
   }
}

Answer 3

你可以在这上面使用jQuery吗？你可以用

$(".class").css("property", val); /* or use the .width property */

Answer 4

有一个名为jQuery Rule的jQuery插件， http://flesler.blogspot.com/2007/11/jqueryrule.html

我尝试动态设置一些棋盘游戏的div大小。它适用于FireFox，而不适用于Chrome。我没试过IE9。

如何在JavaScript中动态设置和修改CSS？

4 个答案: