Why is background color not changing when using style.backgroundColor?

Question

What I am trying to do is to save the current tab background color in a var, and later use that var to change the body color. But why is it not working?

const tabName = 'someId';
var thisTabColor = document.getElementById(tabName).style.backgroundColor;
document.body.style.backgroundColor = thisTabColor;

#someId {
  background-color: #cccccc; /* or whatever */
}

<body>
  <div id="someId">Some text here</div>
</body>

In the above example, the body's background doesn't change to #cccccc, the div's color.

tabName is passed as the function argument function openTab(evt, tabName) — Yunhao Lin, Feb 02 '20 at 13:19
See also [this](https://stackoverflow.com/a/25991851) answer. — double-beep, Feb 02 '20 at 16:35

score 2 · Accepted Answer · answered Feb 02 '20 at 13:23

var tabName = 'container';
var tabElement = document.getElementById(tabName);
var computedStyles = window.getComputedStyle(tabElement);
var thisTabColor = computedStyles.getPropertyValue('background-color');
document.body.style.backgroundColor = thisTabColor;

#container {
  background-color: red;
  border: 1px solid black;
}

<div id="container">Text</div>

score 0 · Answer 2 · answered Feb 02 '20 at 13:12

0

remove the #

document.body.style.backgroundColor = thisTabColor;

answered Feb 02 '20 at 13:12

Endless

34,080
13
108
131

score 0 · Answer 3 · answered Feb 02 '20 at 13:13

0

why you concatenate with "#"? the 1st instruction will return the color value you should remove the #

answered Feb 02 '20 at 13:13

ilyass ELHARRAR

11

Because I read somewhere else that I should concatenate the # because is hex color – Yunhao Lin Feb 02 '20 at 13:18

Why is background color not changing when using style.backgroundColor?

3 Answers3