javascript - 通过 javascript 更改已知类的 css 属性

Question

原来情况是这样的……
我有一个带有特定 css 类的 HTML 元素。我想在不对 HTML 元素本身进行任何更改的情况下更改该特定类的属性值。

HTML代码:

<style>
  .someClass{
      background-color:red;
  }

  span .someOtherClass {
  background-color:blue;
  }
</style>

<span class="someClass someOtherClass">some text</span>

我正在寻找一个 JS 代码，它可以使“.someClass”标识符具有“background-color:green”；

我想更改类本身而不只是使用 .css 选项的原因是 .css 会更改 HTML 元素的样式属性(内联)。用例是在 span 元素中动态添加和删除第二个类 (someOtherClass) 的地方。使用 .css 更改带有“.someClass”类的元素将更改元素的内联样式，结果为:

<span class="someClass someOtherClass" style="background-color:green;">some text</span>

这意味着在 span 元素中添加和删除“someOtherClass”不会有任何影响。

我确实考虑过从 span 元素中删除 someClass 并将其替换为一些动态创建的具有“background-color:green”的新类，但我想知道是否有更优雅的东西。

我们将不胜感激。

Answer 1

您可以简单地添加一个代表绿色的新类，并为其添加一个 CSS 规则。然后，您可以删除原始的 .someClass 或不删除，具体取决于您打算如何使用它。只要分层或更具体地覆盖原类的color属性，无论是否移除，新类都会优先于原类。

var someClass = document.getElementsByClassName('someClass')[0];
someClass.classList.add('green');
someClass.classList.remove('someClass'); // optional

.someClass {
  color: red;
}
.green {
  color: green;
}

<span class="someClass">someclass</span>