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

How to dynamically set and modify CSS in JavaScript?

本文关键字：设置 修改 CSS 动态 JavaScript      更新时间：2023-09-26

我有一些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。

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

myElement.style.width = "400px";

。可以在几秒钟内为您完成。我知道它并没有真正解决 css 与 js 解耦的问题，但你对此无能为力。毕竟，您正在尝试动态设置 css。

根据您要完成的操作，您可能希望尝试定义多个类并仅更改 js 中的 className 属性。

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

这就是我的意思

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

你能用jQuery吗？你可以使用

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

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

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

相关文章：