How to change colors dynamically with Javascript and pure CSS?

Asked

Viewed 201 times

-3

My goal is to create dynamic themes where I can change the colors of the classes with js, for example after a request in the database.

The example I’ll give is, a class that defines the primary color of the site, example of my css:

.bg-primary { background-color: black }

And I would like via Javascript to change the class by changing the background-color, because it is used by various elements. This would happen after the page is already loaded, making it possible to change the theme just by clicking on a button as an example:

   after the change now the class would look like this

.bg-primary { background-color: blue }

Note: I am building this on a simple site only with html/css/js with no framework for studies.

is it possible? or do I need to approach this problem in another way?

javascript html css

  • You need to make some code that changes settings, maybe with https://developer.mozilla.org/en-US/docs/Web/API/Window/Window.localStorage solve your problem. Write in . css find complicated.

  • 1

    Thinking here, I now understood your question better: You wanted to change the content of the class, right? As far as I know this is impossible, javascript can not change the CSS file at runtime and maybe even if it could, we would have to update the page for the browser to reload the file, so it would be something very complicated. I know it is possible to have multiple CSS files and have javascript replace the href from the link tag that loads the CSS file. But I never did this.

  • @Felipecarriel that’s right, I really believe it is not possible to change the content of the class at runtime, I will study another way to attack this problem

  • 2

    I think the title of the question is wrong, since, according to the body of the question, you don’t want to change a class, but rather a CSS rule - the class stays the same .bg-primary. Maybe you may be complicating things unnecessarily, since that is seldom necessary.

  • 1

    Check it out here https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

3 answers

1

In Javascript, a (s) class(s) of an HTML element is obtained through the attribute classList an object of the Domtokenlist type that can be manipulated as an array of strings.

The classList attribute has several methods, see documentation.

Among these methods, the melons that serve you at this time are add(), remove() and toggle(). Take my example, I hope I’ve helped.

function toggle(){
  document.getElementById("el").classList.toggle('selected')
}
p.selected {
  color: blue;
}

p:not(.selected){
  color: red;
}
<p id="el">Lorem ipsum</p>
<button onClick="toggle()">Toggle</button>

  • Cool, but it wouldn’t be what I wanted, I’m needing to change the class at runtime with js, but by the way I’ll need to approach it differently

1

Alternative to another answer, which is a good approach in my opinion, you can, after selecting the DOM element, change the CSS property through the .style of that element:

function toggle(){
  document.getElementsByClassName("bg-primary")[0].style.backgroundColor = 'blue'
}
.bg-primary {
  height: 100vh;
  background-color: black;
}

p {
  color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <div class="bg-primary">
  <p>Lorem ipsum</p>
  <button onClick="toggle()">Toggle</button>
 </div>
</body>
</html>

The document.getElementsByClassName("bg-primary")[0].style.backgroundColor = 'blue' overwrites the value black of property background-color.

  • 1

    Cool, but I need to change the class at runtime because then everyone who used it would suffer the change, but by the way I’ll need to address this problem in another way

0


In the research process I realized that it would not be possible to change the class directly at runtime, and it is necessary to address the problem otherwise.

A cool solution is using various css and with javascript set a different value as below:

document.body.style.setProperty('--color-primary', 'green')

So with js I can dynamically change the colors for example coming from a database.

I’ll leave a practical example:

function trocarCor () {
  document.body.style.setProperty('--color-primary', 'green')
}
:root {
  --color-primary: red;
}

.color-primary {
  color: var(--color-primary) !important
}
<div class="color-primary">Testando</div>

<button onclick="trocarCor()">Trocar cor</button>

  • You can change the content of a CSS rule. https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText . Have a look at document.styleSheets[0].cssRules[0].cssText Using variables is the best way

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.