read color property by DOM manipualation , i want to read the value of body's backgroundColor . but the result be an empty string

Question

i already set the background color in css file , and iwant to read it and change by javascript var backgroundColor = document.querySelector("body").style.backgroundColor;

if change the color it works , but I want to store the value and use it in if contiditon

score 1 · Answer 1 · answered Sep 16 '20 at 04:59

1

Try using getComputedStyle.

const backgroundColor = getComputedStyle(document.querySelector("body")).backgroundColor

answered Sep 16 '20 at 04:59

Troy Carlson

2,965
19
26

score 1 · Answer 2 · answered Sep 16 '20 at 04:59

1

.style only works for defined inline styles. You need to use .getComputedStyle(ele):

 var backgroundColor = getComputedStyle(document.querySelector("body")).backgroundColor;

Also consider document.stylesheets.

answered Sep 16 '20 at 04:59

Chong Lip Phang

8,755
5
65
100

score 0 · Answer 3 · answered Sep 16 '20 at 05:10

0

You can change background color by following ways-

if you want to change background color by body tag
```
 document.body.style.backgroundColor = "red";
```

if want to change background color of an element Id

 document.getElementById("myDiv").style.backgroundColor = "lightblue";
 document.getElementById("myDiv").style.backgroundColor = "#ffffff";

if you are using jquery

$("#myDiv").css( "background-color", "green");

answered Sep 16 '20 at 05:10

user7997603

21
5

1

OP is asking to **read** the value, not set it – Anurag Srivastava Sep 16 '20 at 05:26
Oops my mistake !!! – user7997603 Sep 16 '20 at 05:33
no problem , thank you for you effort – mostafa swify Sep 16 '20 at 06:28

read color property by DOM manipualation , i want to read the value of body's backgroundColor . but the result be an empty string

3 Answers3