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

【问题标题】：Change css property for a known class via javascript通过javascript更改已知类的css属性
【发布时间】：2017-01-15 18:06:27
【问题描述】：

所以情况是这样的......
我有一个带有特定 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 并将其替换为一些具有“背景颜色：绿色”的新动态创建的类，但我想知道是否有更优雅的东西。

我们将不胜感激。

【问题讨论】：

我不太明白这个问题。使用 css（来自样式块或文件，而不是通过属性）not 不会更改内联样式。另一方面，直接使用 javascript 设置样式会。
您可以使用类覆盖内联样式集，方法如下：jsfiddle.net/qsy3f3v0

标签： javascript jquery html css

【解决方案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;
}

&lt;span class="someClass"&gt;someclass&lt;/span&gt;

【讨论】：

【解决方案2】：

在 javascript 中，您可以使用 insertRule() 将规则添加到样式表的末尾（或者实际上是样式表中的任何位置）。

这将使您能够更改与特定类关联的一个或几个或所有声明 - 在这种情况下，重写 .someClass 的声明

background-color: red

到

background-color: green.

工作示例：

var span = document.getElementsByTagName('span')[0];
var toggleSomeOtherClass = document.getElementsByClassName('toggle-some-other-class')[0];
var changeSomeClass = document.getElementsByClassName('change-some-class')[0];
var backgroundColor = 'red';

function toggleClass() {
	span.classList.toggle('someOtherClass');
}

function changeClass() {
	backgroundColor = (backgroundColor === 'red' ? 'green' : 'red');
	document.styleSheets[0].insertRule('.someClass {background-color: ' + backgroundColor + ';}', document.styleSheets[0].cssRules.length);
	document.styleSheets[0].insertRule('.someOtherClass {background-color: blue;}', document.styleSheets[0].cssRules.length);
}

toggleSomeOtherClass.addEventListener('click', toggleClass, false);
changeSomeClass.addEventListener('click', changeClass, false);

span {
display: inline-block;
width: 120px;
height: 60px;
line-height: 60px;
color: rgb(255,255,255);
font-weight: bold;
text-align: center;
}

.someClass {
background-color: red;
}

.someOtherClass {
background-color: blue;
}

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

<button class="toggle-some-other-class" type="button">Toggle someOtherClass</button>
<button class="change-some-class" type="button">Change someClass</button>

【讨论】：