JS How to change css class color from javascript? [duplicate]

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>

document.getElementById("gmType").style.backgroundColor="red"; or document.querySelector(".gmBox").style.backgroundColor="red"; AFTER the element has loaded — mplungjan
– mplungjan, Commented Apr 2, 2019 at 6:12
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
– Amadan, Commented Apr 2, 2019 at 6:20
@RobbyCornelissen this is my jquery: let $ = s => document.querySelector(s); :P — Kamil Kiełczewski
– Kamil Kiełczewski, Commented Apr 2, 2019 at 7:43

Kamil Kiełczewski · Accepted Answer · 2019-04-02 06:16:13Z

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 2, 2019 at 6:16

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

Dupe of stackoverflow.com/questions/13528512/…, which would benefit from your entry

alimbaronia · Accepted Answer · 2019-04-02 06:19:11Z

0

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>

edited Apr 2, 2019 at 6:19

answered Apr 2, 2019 at 6:15

alimbaronia

5042 silver badges10 bronze badges

Collectives™ on Stack Overflow

JS How to change css class color from javascript? [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related