Difference Between Body.Style.Backgroundcolor and Window.Getcomputedstyle(Body).Getpropertyvalue('Background-Color')

Two ways to get background-color property using Javascript

Checkout this link

The getComputedStyle() method is used to get all the computed CSS property and values of the specified element. The use of computed style is displaying the element after stylings from multiple sources have been applied. The getComputedStyle() method returns a CSSStyleDeclaration object.

In other words, the returned value from both calls can be different, since the computed style will be the result of applying all rules for the element.
The element CSS reads what we set directly on the element, which can be overwritten by another rule on another element (its parent for example).

why element.style.backgroundColor property gives an empty string as a result?

.style contains only inline styles (set via that property, or the HTML attribute with the same name). It's not affected by style sheets at all. getComputedStyle gets you the current effective value for that property, regardless of where it came from.

Cannot get background style using javascript

You are not storing the value of window.getComputedStyle(test) inside the variable style.

Be aware that getPropertyValue('background-color') returns a RGB value not a HEX code.

var test = document.getElementById('test');

var style = window.getComputedStyle(test);

console.log(style.getPropertyValue('background-color'));

#test {
  background: #0ff0ff;
}

<div id='test'>test</div>

document.body.style.backgroundColor is undefined

You get an empty value in alert, because you haven't set the background color of the body before reading the value. In the second alert it gives you the value, since you've set it.

document.body.style represents inline styles in the body, not the style given in the stylesheet. If you need to get current values, you need to use window.getComputedStyle() like this:

bgColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color');

Note that you can access the style properties with CSS names using getPropertyvalue(), or JS style camelCase names:

var bodyStyle = window.getComputedStyle(document.body, null);
bgColor = bodyStyle.backgroundColor;
fgColor = bodyStyle.color;
...

How to get the background color of an HTML element?

As with all css properties that contain hyphens, their corresponding names in JS is to remove the hyphen and make the following letter capital: backgroundColor

alert(myDiv.style.backgroundColor);

Getting the real background-color of an element?

Try window.getComputedStyle:

window.getComputedStyle(element, null).getPropertyValue("background-color")

This approach is simple and native, but doesn't support IE8

getPropertyValue(backgroundColor) returns an empty string

Within your CSSStyleDeclaration, you need to change 'backgroundColor' to 'background-color' and then call

mycss.getPropertyValue('background-color')

An example:
HTML:

<head><style>
body {
    background-color: lightblue;
}
</style>
</head>
<body id="body">
  hello world
</body>

and then calling the getPropertyValue:

var mycss = window.getComputedStyle(document.getElementById("body"));
myelement.innerHTML = mycss.getPropertyValue("background-color");

Get and Use Background Color to apply the same color in other window

You can use DOMObject.style.backgroundColor and window.getComputedStyle:

<object to set background color of>.style.backgroundColor = window.getComputedStyle(document.getElementsByTagName(“BODY”)[0], null).getPropertyValue("background-color")

You can find documentation here:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle