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

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. developer.mozilla.org/en-US/docs/Web/API/Window/… — Hemant Parihar
– Hemant Parihar, Commented Aug 28, 2015 at 10:08

Vibhesh Kaul · Accepted Answer · 2015-09-05 22:37:16Z

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 5, 2015 at 22:37

answered Aug 28, 2015 at 9:23

Vibhesh Kaul

2,6211 gold badge24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hemant Parihar Over a year ago

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.

Vibhesh Kaul Over a year ago

I've given a solution for IE(internet explorer) an Other browsers separately !

Hemant Parihar Over a year ago

What you suggest for internet explorer is not working.

Vibhesh Kaul Over a year ago

oh yes check it now check the edit!

Hemant Parihar Over a year ago

Still not working It return me an undefined value.

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-28 09:18:57Z

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, 2015 at 9:18

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

2 Comments

Hemant Parihar Over a year ago

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.

Praveen Kumar Purushothaman Over a year ago

Fallback means, a backup method whne the main method doesn't work.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Linked

Related