Javascript 如何使用JS在CSS文件中编写CSS样式？

假设我有一个CSS文件custom_style.CSS和一个HTML文件custom_render.HTML

custom_render.html包含一些输入字段，用于从用户获取输入，然后根据这些输入生成CSS样式

现在，我想将这些生成的CSS样式存储在名为custom_style.CSS的CSS文件中，[位于我的项目根目录中]，以便向用户显示他们选择的预览/输出

谷歌搜索之后，我找到了一种方法，可以使用JavaScript将生成的CSS存储在同一个文件[custom_render.html]中，但我想将它们存储在custom_style.CSS中

谁能告诉我如何使用JavaScript或其他JavaScript框架在CSS文件中编写CSS样式。

---

-谢谢，您可以在样式表中修改对象的参数。例如：

document.styleSheets[i].rules[j].style.marginTop = "100px";

i

是与要编辑的工作表相对应的编号

及

j

是要更改参数的元素规则

---

在本例中，我使用了

marginTop

作为参数，

100px

作为值，但它可以是您想要的任何有效CSS。

好的，您可以修改样式表中对象的参数。例如：

document.styleSheets[i].rules[j].style.marginTop = "100px";

i

是与要编辑的工作表相对应的编号

及

j

是要更改参数的元素规则

在本例中，我使用

marginTop

作为参数，使用

100px

作为值，但它可以是任何您想要的有效CSS。

简单。。。（假设这是您试图实现的目标）

var elem=document.getElementsByClassName（'target_class'）；
//应使用for循环将单击事件分配给包含此类的每个元素
元素[0]。onclick=function（）{
元素[0]。style.background='green'；
元素[0].style.opacity='0.2'；
}

简单。。。（假设这是您试图实现的目标）

var elem=document.getElementsByClassName（'target_class'）；
//应使用for循环将单击事件分配给包含此类的每个元素
元素[0]。onclick=function（）{
元素[0]。style.background='green'；
元素[0].style.opacity='0.2'；
}

---

在基于web的JS（即非NodeJS）中，您不能直接写入文件。如果浏览器允许网页修改文件系统，这将是一个巨大的安全问题。但是，您可以提示用户下载并保存自定义生成的CSS文件。@暹罗PHP也不能写入用户的文件，除非OP运行的是本地PHP服务器。@qxz我假设OP试图将新生成的样式保存在OP服务器中的

CSS

文件中。（正如OP所说，它位于我的项目根目录中）基本上OP试图覆盖一个现有的css文件（尽管这是一个糟糕的想法）@siam:：目前我对使用PHP或其他东西来完成这项任务不感兴趣。@Shimul您想保存样式以供将来参考，还是仅仅向用户显示他们当前的更改？在基于web的JS中（即非节点），您不能直接写入文件。如果浏览器允许网页修改文件系统，这将是一个巨大的安全问题。但是，您可以提示用户下载并保存自定义生成的CSS文件。@暹罗PHP也不能写入用户的文件，除非OP运行本地PHP服务器。@qxz我假设OP尝试保存新生成的CSS文件位于OP服务器中的

css

文件中的样式（正如OP所说，位于我的项目根目录中）基本上OP试图覆盖现有的css文件（这是一个糟糕的想法）@暹罗：：目前我不想使用PHP或其他东西来完成此任务。@Shimul您想保存样式以供将来参考，还是仅仅向用户显示其当前更改？我如何添加类？因为所有样式都是基于类呈现的。例如：.xyz{…}.xyz+.abc{…}诸如此类……也许有比这更好的方法，但在我的脑海中，我会创建“template”类作为css的第一项，它只是具有一些良性属性，如

position:inherit

（或诸如此类）。然后您可以这样做：

var templateClass=document.styleSheets[0]。规则[0]；var numberOfRules=document.styleSheets[0]。rules.length；document.styleSheets[0]。rules[numberOfRules]=templateClass；document.styleSheets[0]。rules[numberOfRules]。style.marginTop=“10px”；

对不起，我是stackOverflow n00b，所以不知道如何格式化，哈哈。哦，我忘记添加了。您可能需要这样设置新类名：

document.styleSheets[0]。rules[numberOfRules]。selectorText=“.myNewClass”

再说一遍，这些都是我想不起来的，但希望它能让您朝正确的方向前进。我如何添加类？因为所有样式都是基于类的。例如：.xyz{…}.xyz+.abc{…}诸如此类……也许有比这更好的方法，但在我的脑海中，我会创建“template”类作为css的第一项，它只是具有一些良性属性，如

position:inherit

（或诸如此类）。然后您可以这样做：

var templateClass=document.styleSheets[0]。规则[0]；var numberOfRules=document.styleSheets[0]。rules.length；document.styleSheets[0]。rules[numberOfRules]=templateClass；document.styleSheets[0]。rules[numberOfRules]。style.marginTop=“10px”；

对不起，我是stackOverflow n00b，所以不知道如何格式化它，哈哈。哦，我忘了添加新的类名，你可能必须这样设置：

document.styleSheets[0]。rules[numberOfRules]。selectorText=“.myNewClass”；

同样，这都是我不知道的，但希望它能让你进入ri