JS How to change css class color from javascript?

Question

I would like to change color from div class. I searched the net for some info, but it's not working for me.

I have css style class in which I have property background-color, and I want to change this property from JS file.

I want in class gmBox change background-color:, how I can do this, from JS file?

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

Sounds like an [XY problem](https://en.wikipedia.org/wiki/XY_problem). What are you trying to achieve? — Robby Cornelissen, Apr 02 '19 at 06:09
You can't change the css file from a js file, instead you can use another class or inline styles. — Vladimir Bogomolov, Apr 02 '19 at 06:10
`document.getElementById("gmType").style.backgroundColor="red";` or `document.querySelector(".gmBox").style.backgroundColor="red";` AFTER the element has loaded — mplungjan, Apr 02 '19 at 06:12
@mplungjan the question is about changing not element style but CLASS style (so your minium-effort link not apply to this) — Kamil Kiełczewski, Apr 02 '19 at 06:19
While OP might be satisfied with an Y answer to their X question, the question itself is _not_ a duplicate to the link it was closed with. Kamil Kiełczewski actually answered the question as asked, and it is interesting in its own right (though few-to-none should have need to do so). — Amadan, Apr 02 '19 at 06:20
@KamilKiełczewski Obviously it does apply since OP was happy with the answer below — mplungjan, Apr 02 '19 at 06:20
use jQuery , *jQuery("#gmType").css('background-color': '#343333');* — Vishwa, Apr 02 '19 at 06:28
that's why I **suggested** using jQuey if possible.much easier — Vishwa, Apr 02 '19 at 06:29
@Vishwa In 99% of the cases, yes. And maybe lodash for data manipulation utilities. If really in need of DOM manipulation and not already using a framework, maybe [cash](https://github.com/kenwheeler/cash). — Robby Cornelissen, Apr 02 '19 at 06:34
@RobbyCornelissen this is my jquery: `let $ = s => document.querySelector(s);` :P — Kamil Kiełczewski, Apr 02 '19 at 07:43

score 2 · Answer 1 · answered Apr 02 '19 at 06:16

2

To change class you need to edit document styles

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

answered Apr 02 '19 at 06:16

Kamil Kiełczewski

85,173
29
368
345

1

Dupe of https://stackoverflow.com/questions/13528512/modify-a-css-rule-object-with-javascript, which would benefit from your entry – mplungjan Apr 02 '19 at 06:26

alimbaronia · Accepted Answer · 2019-04-02T06:19:11.947

Try doing this (button added just to show the toggling effect):

$("#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 How to change css class color from javascript?

2 Answers2