javascript - 从两个不同的文件加载并应用相同的 css 类到两个不同的元素

Question

假设我有两个不同的 css 文件，每个文件都包含相同 css 类的定义(例如 .mainDiv {} )，但每个类都有不同的属性，我将如何应用它们到我的 HTML 代码中的两个不同的 div(比如 IDs myMainDiv1 和 myMainDiv2)？

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

所以我绝对不想更改 css 文件；我可以根据需要拥有多个，但它们都需要具有完全相同的类名(例如 mainDiv)；通过 JavaScript - 如果可能 - 我可以为我的每个 div 应用样式。

Answer 1

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

最好的选择是在每个文件中为每个规则添加前缀。因此，如果您有 light-theme.css 和 dark-theme.css 那么 light-theme.css 中的每条规则都将以类似.light-theme(同样适用于 dark-theme.css -> .dark-theme)。

一旦为每个规则添加了相应的前缀，您就可以包含这两个文件，并且只需添加一个基于您希望生效的 CSS 文件的类即可。

/* Shared styles */
#content {
  height: 400px;
  width: 400px;
}
#content > div {
  width: 200px;
  float: left;
}
ul {
  list-style: square inside;
}
li {
  height: 40px;
}



/* light-theme.css */
.light-theme li {
  color: #339;
  background-color: #fff;
}



/* dark-theme.css */
.dark-theme li {
  color: #ccf;
  background-color: #333;
}

<div id="content">
  <div class="light-theme">
    <h2>Light</h2>
    <ul>
      <li>Red</li>
      <li>White</li>
      <li>Blue</li>
    </ul>
  </div>
  <div class="dark-theme">
    <h2>Dark</h2>
    <ul>
      <li>Alpha</li>
      <li>Beta</li>
      <li>Gamma</li>
    </ul>
  </div>
</div>