Question

我想更改div类的颜色。我在网上搜索了一些信息，但这对我不起作用。

我有一个css样式类，其中具有属性 background-color ，并且我想从JS文件中更改此属性。

我想在类 gmBox 中更改 background-color：，如何从JS文件中做到这一点？

.gmBox {
  vertical-align: middle;
  padding: 10px;
  margin: 5px;
  background-color: yellow;
  color: black;
  font-size: 23px;
  border-radius: 5px;
}

<div class="gmBox" id="gmType">GM12</div>

Answer 1

要更改班级，您需要编辑文档样式

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.gmBox')
    .style['background-color']='red';

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.gmBox').style['background-color']='red';

.gmBox {
vertical-align: middle;
padding: 10px;
margin: 5px;
background-color: yellow;
color: black;
font-size: 23px;
border-radius: 5px;
}

<div class="gmBox" id="gmType">GM12</div>

Answer 2

尝试执行此操作（添加按钮只是为了显示切换效果）：

$("#toggle").on("click", function(){
  $(".gmBox").toggleClass("toggleBgColor");
})

.gmBox {
  vertical-align: middle;
  padding: 10px;
  margin: 5px;
  background-color: yellow;
  color: black;
  font-size: 23px;
  border-radius: 5px;
}
.toggleBgColor {
   background-color: blue;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gmBox" id="gmType">GM12</div>
<button id="toggle">Click me to toggle!!!</button>

JS如何从JavaScript更改CSS类的颜色？

2 个答案: