Why doesn't the DOM style node show styles applied by a style sheet?

Question

I have a jsfiddle here -http://jsfiddle.net/stevea/R3z2j/2/ - where I\'ve applied a red background to the body in a style sheet, but when I look at the body\'s style node in

Answer 1

To elaborate on my comment...

element.style "represents the element's style attribute," or the element's own styles as from the style attribute or direct manipulation.

To get the styles the element is actually using (including inherited), you can use getComputedStyle() in most browsers (optionally with getPropertyValue()) or element.currentStyle in oldIE:

window.getComputedStyle(document.body).backgroundColor
window.getComputedStyle(document.body).getPropertyValue('background-color')

document.body.currentStyle.backgroundColor

Or, since you're using jQuery, you can also use .css(propertyName):

$(document.body).css('background-color');