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

Question

我是一位有用的助手，可以为您翻译文本。

我有一些JavaScript代码，它创建一些

元素并设置它们的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 还未应用。

- AkademiksQc

---

你什么时候运行JS？立即执行？在“onload”事件中？还是在“ondocumentready”事件中？ - mwcz

我有点困惑这个问题。你是想影响所有具有myClass类的元素还是只想影响刚刚创建的那一个？ - James Montagne

我在这件事上和詹姆斯持相同的看法。在回答问题并重新阅读后，我实际上对这样做的目的感到困惑。您想通过创建一个CSS样式表来“解耦”JS和CSS，该样式表依赖于Javascript来注入/替换您将硬编码到Javascript代码中的正确值？那几乎是“解耦”一词的完全相反意思。 - streetlogics

好的，好的，不是面向对象的解耦...这是我的错误命名。对我来说，目标只是改变代码，使其更易读。我试图改变多个元素，因为每个元素都有不同的值。我认为最好的方法就是创建一个JS方法，其目的仅是设置CSS属性。 - AkademiksQc

Answer 1

为了设置样式，可以通过定义内部页面样式声明来实现。

这是我的意思

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

- Starx

---

1. 不要使用 .innerHTML。请改用 <HTMLStyleElement>.textContent 或 <HTMLHeadElement>.appendChild(document.createTextNode('...'))。
2. 这在旧版 IE 中不起作用。对于 IE，请访问 <HTMLStyleElement>.styleSheet.cssText='...'。

- Rob W

Answer 2

如果我正确理解你的问题，似乎你正在尝试在CSS文件中设置占位符文本，然后使用JavaScript解析该文本，并使用CSS值来设置该类。你不能按照你尝试的方式这样做。为了实现这一点，你需要从DOM中获取CSS文件的内容，操作文本，然后将其保存回DOM。但这是一个过于复杂的方法去做某些事情...

myElement.style.width = "400px";

在几秒钟内，我可以为您完成的内容。我知道这并没有真正解决css和js分离的问题，但你其实不能做太多事情。毕竟，你正在尝试动态设置css。

根据您想要实现的目标，您可能希望尝试定义多个类，并在js中更改className属性。

- Mark Rawlingson

---

我只是想使用我的 CSS 文件作为模板，并将我的变量注入其中，但我觉得这不是最好的技术方法，我将继续使用我的 JavaScript CSS 实现。谢谢。 - AkademiksQc

Answer 3

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

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

- Ryan Lanciaux

---

此帖子的标签是Javascript，不是jQuery。 - Oscar Jara

@Oscar Jara - 就我所知，jQuery 是100％的 JavaScript。但无论如何，这就是为什么他问是否 jQuery 是可能性的原因，我猜。 - Sven Bieder

jQuery是JavaScript，但JavaScript不是jQuery。 - Starx

Answer 4

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

我尝试使用它来动态设置棋盘游戏中一些div的大小。它在FireFox中可以工作，但在Chrome中不行。我没有尝试IE9。

- Alpha Huang