Javascript 从两个不同的文件在两个不同的元素上加载并应用相同的css类

如果我有两个不同的css文件，每个文件都包含同一css类的定义（例如

.mainDiv{}

），但每个类都有不同的属性，那么我如何能够将它们应用到HTML代码中的两个不同的div（比如使用id

myMainDiv1

和

myMainDiv2

）

我意识到这不再是div元素id和css类名称之间的关联，但我想知道是否有可能通过JavaScript解析/读取每个css文件，并为我的每个div动态应用规则

---

所以我根本不想改变css文件；我可以根据需要有任意多个，但它们都需要有完全相同的类名（例如，

mainDiv

）；通过JavaScript——如果可能的话——我可以为我的每个div应用样式。

你必须用更具体的选择器覆盖不正确的样式

#myMainDiv1.mainDiv { ... }
#myMainDiv2.mainDiv { ... }

---

可以为一个元素提供多个类。 如果您使用的是类mainDiv

<div class="mainDiv firstMainDiv"></div>
<div class="mainDiv secondMainDiv"></div>

---

这种样式只适用于第一部分。

尝试使用javascript解析CSS确实不是一个好主意，而只是将CSS用于它擅长的选择器

最好的选择是为每个文件中的每个规则添加前缀。因此，如果您有

light-theme.css

和

dark-theme.css

，那么

light-theme.css

中的每一条规则都会以类似

.light-theme

的内容开头（对于

dark-theme.css

->

.dark-theme

）

一旦每个规则都有相应的前缀，您就可以包含这两个文件，只需根据您想要生效的CSS文件添加一个类

/*共享样式*/
#内容{
高度：400px；
宽度：400px；
}
#内容>分区{
宽度：200px；
浮动：左；
}
保险商实验室{
列表样式：内部为方形；
}
李{
高度：40px；
}
/*light-theme.css*/
.轻主题李{
颜色：#339；
背景色：#fff；
}
/*dark-theme.css*/
.黑暗主题李{
颜色：#ccf；
背景色：#333；
}

轻的

红色的
白色的
蓝色的

黑暗的

阿尔法
贝塔
伽马射线

为了读取css文件的内容，您可以使用javascript自己设置css文件的样式。除非你不知道css内容或者内容太大。或者，您可以使用css预处理器（如sass或更少）导入样式并将其命名为不同的名称，然后应用于divsYep，这在本例中非常理想。我想尝试不使用sass，只使用轻量级JavaScript。关于从css文件中读取/存储css规则，然后将其应用于div元素，我应该注意在这方面的任何已知浏览器兼容性问题？谢谢@isherwood。如果我不能这样做，而在每个CSS文件中只有.mainDiv{}，该怎么办？我在考虑一个解决方案，通过JS将样式表附加到HEAD标记，读取mainDiv类并将其存储在JS中（使用类似的解决方案），然后从HEAD中删除样式表并添加第二个，然后重复相同的步骤。不是100%确定这是可能的，有任何建议/想法吗？谢谢@JimmyBoh，这将是理想的，除非我将在每个文件中有大量css规则，因此我希望避免让最终用户重命名每个规则（通过添加前缀，如建议或后缀）。不精通css，但是否有办法解决这个问题？根据您的建议，在每个css文件的一个特定位置（假设有50条规则）只需重命名一次，并避免为每个规则添加前缀？您可以切换到LESS或SASS。它们是CSS预处理器，为变量、混合以及最重要的（对您而言）提供额外的语言特性。这意味着您可以包装整个文件，而不是更改每个规则。生成CSS时，它将包含前缀值。它更复杂，但它确实是你正在寻找的答案。（您甚至可以使用它生成一个带有所有前缀的全新CSS文件）。

.mainDiv.firstMainDiv {}