3

fiddle

The following code alerts empty string:

HTML:

<div id="test">test</div>

CSS:

#test{
    background-color: #f00;
}

SCRIPT:

alert(document.getElementById('test').style.backgroundColor)

But if I set bgcolor in javascript then it would alert the bgcolor value:

document.getElementById('test').style.backgroundColor='#ff0';
alert(document.getElementById('test').style.backgroundColor) // rgb(255,255,0)

So, how can I get the bgcolor value without setting it in js that is defined in stylesheet?

Note that I don't want to get a value at all if it comes from the user agent's stylesheet rather than mine.

Sadeshkumar Periyasamy
  • 4,848
  • 1
  • 26
  • 31
Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68

2 Answers2

5

The reason you're not seeing anything from .style is that that only gives you the styles set on the element, not ones it receives from stylesheets.

For modern browsers, you can use window.getComputedStyle to get the computed style object for the element. For IE8 (and earlier, but...), you can use .currentStyle to get much the same thing. So:

var element = document.getElementById('test');
var style;
if (window.getComputedStyle) {
    style = window.getComputedStyle(element);
} else {
    style = element.currentStyle;
}
if (!style) {
    // ...seriously old browser...
} else {
    alert(style.backgroundColor);
}

I just want to get stylesheet value.

getComputedStyle/currentStyle will give you that, but will also give you the browser's default style.

There's no simple interface to get only the value from your own stylesheets and not from the user agent's default stylesheet. You might want to look at the document.styleSheets property, which gives you access to the individual parsed stylesheets and their rules. But you'd have to handle the logic of applying those rules to the element in question, which is (of course) non-trivial.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • doesn't it take browser's default value (user agent's style) ? I just want to get stylesheet value. – Navin Rauniyar Aug 11 '14 at 07:56
  • @NavinRauniyar: I'm not quite sure I understand the question which "it"? If you mean the `style` property, then no, it doesn't. If you mean `getComputedStyle`/`currentStyle`, then yes, it does. – T.J. Crowder Aug 11 '14 at 07:57
  • I mean: like browsers have default value display:block that I don't want to get but just get my own stylesheet value only – Navin Rauniyar Aug 11 '14 at 07:59
  • @NavinRauniyar: Very difficult to do that (always include information like that in the question! I've updated it). See updated answer. – T.J. Crowder Aug 11 '14 at 08:00
  • Just to split hairs a bit here; `getComputedStyle()` won't give you the css property value, it will give the computed style. This won't make a difference on background-color, but will make a difference if you're looking for a dimension or position that is set as a percentage. – hal Jul 17 '15 at 10:58
  • @moss: "...to get the *computed* style object for the element..." – T.J. Crowder Jul 17 '15 at 11:22
  • I know you specified that this is for computed value. I'm just saying the answer doesn't match the Question title. Although it does solve the specific issue the OP requested a solution for. So it's actually more an issue with the question than the answer. – hal Jul 17 '15 at 11:57
  • @moss: The title seems fine. A computed style's value is still a "CSS property value". It's just a computed one. – T.J. Crowder Jul 17 '15 at 11:59
-1

Use this Code:

window.getComputedStyle(document.getElementById('test')).getPropertyValue("background-color")

Hope this may be useful

Suganth G
  • 5,136
  • 3
  • 25
  • 44
jaakkoj
  • 121
  • 6