Storing the style property's value into a variable, in JavaScript.

Question

I want to get the background property of my element. This is my code.

<!doctype html>
<html>
<head>
<style>
div#pt {
    background: rgba(192,15,18,1.00);
    width: 200px;
    height: 200px;
}
</style>
</head>

<body>
<div id="pt" onClick="pick()"></div>
<script>
function pick() {
debugger;
var color = document.getElementById("pt").style.background;
}
</script>
</body>
</html>

I think this will work, but it doesn't work. It gives an empty string to color variable. I think this is not the right way to get the value of background's property. So, kindly help me, how can i get the value of background's property.

Thank you. I got it. This will make my concept more clear. https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — Hemant Parihar, Aug 28 '15 at 10:08

Vibhesh Kaul · Answer 1 · 2015-09-05T22:37:16.710

2

The style property only contains styles assigned in a style attribute or set by scripting. Styles set in a style element or an external stylesheet won't be found there, at which point you need different techniques for different browsers (standard techniques for everything but IE, as usual).

For IE

var color= document.getElementById("pt").currentStyle.background;

Other Browsers

var color= getComputedStyle(document.getElementById("pt")).getPropertyValue(background);

edited Sep 05 '15 at 22:37

answered Aug 28 '15 at 09:23

Vibhesh Kaul

2,593
1
21
38

I apply it but it work fine in Chrome, but in rest of the browser (firefox, internet explorer , Microsoft edge) it give an empty string. Big Issue for me. – Hemant Parihar Aug 29 '15 at 10:13
I've given a solution for IE(internet explorer) an Other browsers separately ! – Vibhesh Kaul Aug 29 '15 at 12:30
What you suggest for internet explorer is not working. – Hemant Parihar Sep 05 '15 at 19:52
oh yes check it now check the edit! – Vibhesh Kaul Sep 05 '15 at 22:37
Still not working It return me an undefined value. – Hemant Parihar Sep 07 '15 at 17:33

score 1 · Answer 2 · answered Aug 28 '15 at 09:18

1

Use the getComputedStyle as a fall back. You can do something like this:

var color =
   (document.getElementById("pt").style.background.length > 0) ?
     document.getElementById("pt").style.background.length : 
     getComputedStyle(document.getElementById("pt")).getPropertyValue("background");

The line breaks are only for illustrative purposes.

answered Aug 28 '15 at 09:18

Praveen Kumar Purushothaman

164,888
24
203
252

What does fall back means? I used only this line getComputedStyle(document.getElementById("pt")).getPropertyValue("background"); It works fine in Chrome but not in rest of the browser. – Hemant Parihar Aug 29 '15 at 10:15
Fallback means, a backup method whne the main method doesn't work. – Praveen Kumar Purushothaman Aug 29 '15 at 11:12

Storing the style property's value into a variable, in JavaScript.

2 Answers2