Question

所以案件是这样的......
我有一个带有特定css类的HTML元素。我想更改该特定类的属性的值，而不对HTML元素本身进行任何更改。

HTML code：

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

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

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

我正在寻找一个能够让它成为＆＃34; .someClass＆＃34;标识符将具有＆＃34; background-color：green＆＃34 ;;

我想更改类本身而不仅仅是使用.css选项的原因是.css更改了HTML元素的样式属性（内联）。用例是在span元素中动态添加和删除第二个类（someOtherClass）的位置。使用.css用＆＃34; .someClass＆＃34;更改元素class将改变元素的内联样式：

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

这意味着添加和删除＆＃34; someOtherClass＆＃34;来自span元素不会有任何影响。

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

任何帮助将不胜感激。

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>

Answer 2

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

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

重写.someClass的声明

background-color: red

到

background-color: green。

工作示例：

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: