How to use css variable colors and js to change div background

Question

So this is a very basic function (found and edited for my purposes) that alternates the div background color to white or black.

I would like to change the code to utilize the css variables I have in the root property and have no onClick functions inside the html. I want to keep html and js seperate, but I don't know how to go about this.

Can I have two buttons that can switch between the css variable colors for the div?

Thank you.

function changeColor(color) {
  var element = document.getElementById('box');
  element.style.backgroundColor = color;
}

root {
  --white { color: #fff}
  --black { color: #000}
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>

<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>

@Maheer Ali that is my question, yes. Also, removing js from html while using css variables to change color of div bg — Krys
– Krys, Commented Jan 30, 2019 at 9:40

לבני מלכה · Accepted Answer · 2019-01-30 08:36:01Z

6

You can set one css variable and onclick change the color.

Use document.body.style.setProperty('--main-color',color) to set color to var

function changeColor(color) {
  document.body.style.setProperty('--main-color',color)
}

root {
  --main-color{ color: #fff}
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  background-color: var(--main-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>

<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>

answered Jan 30, 2019 at 8:36

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

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

2 Comments

Krys Over a year ago

I dont want to use js in the html

לבני מלכה Over a year ago

you mean that you don't want use function? but you must you can do it shortly <button onClick="document.body.style.setProperty('--main-color','white')">white</button>

Nick Parsons · Accepted Answer · 2019-01-30 08:58:13Z

You can add a data-color attribute to your buttons which specifies the color (variable) to change to when clicking on the given button. Then you can add the click event listener to all your buttons with the class color-btn. Then when you click on a given button the event listener will be called, which will get the data attribute from the button clicked, and then use your changeColor function to change the div to the appropriate color (using the variable).

Also, you haven't defined your variables correctly. Firstly, you need to target the root using :root. Then you nee to set your variables using --variableName: COLOR. Lastly, in your changeColor function you need to use .style.backgroundColor = "var(--" +color +")" to correctly use the variable.

See working example below

[...document.getElementsByClassName("color-btn")].forEach(elem => {
  elem.addEventListener('click', function() {
    const btnColor = this.getAttribute('data-color');
    changeColor(btnColor);
  });
})

function changeColor(color) {
  var element = document.getElementById('box');
  element.style.backgroundColor = "var(--" +color +")";
}

:root {
  --w: #fff;
  --b: #000;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>

<button class="color-btn" data-color='w'>white</button>
<button class="color-btn" data-color='b'>black</button>

zuckerburg · Accepted Answer · 2019-01-30 08:36:28Z

0

Register an onClick event on those buttons (you would have to assign a unique ID to them to reference them properly)

Example:

document.getElementById("myBtn").addEventListener("click", changeColor("white"));

edit

I see you're using jQuery, so:

$("#myBtn").on( "click", function() {
  changeColor("white");
});

That way your HTML doesn't have JS in it. You would have 2 events, one for each button.

answered Jan 30, 2019 at 8:36

zuckerburg

3382 silver badges6 bronze badges

Comments

Rena · Accepted Answer · 2019-02-04 09:04:27Z

<!DOCTYPE html>
<html>
  <head>
    <style>
        :root 
        {
            --color-white:#fff;
            --color-black:black;
         }

        .box 
        {
          width: 100px;
          height: 100px;
          border: 1px solid #aaa;
        }
    </style>
      <script>
        function changeColor(color) 
        {
              var element = document.getElementById('box');
              var style = getComputedStyle(document.querySelector(':root'));
              element.style.backgroundColor = style.getPropertyValue('--color-' + color);
        }
      </script>
  </head>
  <body>

    <div class="box" id="box">
    </div>

    <button onClick=changeColor('white')>white</button>
    <button onClick=changeColor('black')>black</button>
  </body>
</html>

Collectives™ on Stack Overflow

How to use css variable colors and js to change div background

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related