How to select css variable and assign style value to another element

Question

I am looking for a way to select the css variable --bgcolor of the element being hovered and assign that value to the body css

Here is my current attempt, any suggestions?

var body = document.querySelector('body');
var boxList = document.querySelectorAll('.box');

  var box = Array.prototype.slice.call(boxList);
  box.forEach(function (el) {
    el.addEventListener('mouseover', ()=> {
      var newbg = el.style.background;
      body.style.background = newbg;
    });
  });

body {
  background: var(--bgcolor);
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  background: var(--bgcolor);
  display:inline-block;
}

<body>
  <div class="box" style="--bgcolor: #FF0000"></div>
  <div class="box" style="--bgcolor: #00FF00"></div>
  <div class="box" style="--bgcolor: #0000FF"></div>
</body>

Maheer Ali · Accepted Answer · 2020-12-22 08:45:19Z

You can use getComputedStyle(). If want to get the variable then you need to use getPropertyValue() with computedStyle. Otherwise you can directly get background property from computedStlye

var body = document.querySelector('body');
var boxList = document.querySelectorAll('.box');

  var box = Array.prototype.slice.call(boxList);
  box.forEach(function (el) {
    el.addEventListener('mouseover', ()=> {
  
      var newbg = window.getComputedStyle(el).getPropertyValue('--bgcolor')
      
      body.style.background = newbg;
    });
  });

body {
  background: var(--bgcolor);
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  background: var(--bgcolor);
  display:inline-block;
}

<body>
  <div class="box" style="--bgcolor: #FF0000"></div>
  <div class="box" style="--bgcolor: #00FF00"></div>
  <div class="box" style="--bgcolor: #0000FF"></div>
</body>

aryanm · Accepted Answer · 2020-12-22 08:47:49Z

2

You can access CSS variables in your Javascript code through the getComputedStyle and getPropertyValue methods as shown below:

getComputedStyle(el).getPropertyValue('--bgcolor');

So in your case, set newbg to the line above instead of el.style.background.

If you encounter any problems or questions while implementing my solution, please tell me in a comment.

Edit: Looks like someone beat me to the punch!

answered Dec 22, 2020 at 8:47

aryanm

1,27918 silver badges27 bronze badges

Comments

mplungjan · Accepted Answer · 2020-12-22 08:49:48Z

I would delegate

const body = document.querySelector('body');
const bodyCol = window.getComputedStyle(body).getPropertyValue('--bgcolor')
const hover = e => {
  const tgt = e.target;
  if (tgt.classList.contains("box")) {
    const bg  = window.getComputedStyle(tgt).getPropertyValue('--bgcolor')
    body.style.backgroundColor = e.type === "mouseover" ? bg : bodyCol;
  }  
};

document.getElementById("colors").addEventListener("mouseover",hover)
document.getElementById("colors").addEventListener("mouseout",hover)

body {
  background: var(--bgcolor);
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  background: var(--bgcolor);
  display:inline-block;
}

<body>
<div id="colors">
  <div class="box" style="--bgcolor: #FF0000"></div>
  <div class="box" style="--bgcolor: #00FF00"></div>
  <div class="box" style="--bgcolor: #0000FF"></div>
</div>
</body>

Collectives™ on Stack Overflow

How to select css variable and assign style value to another element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related