How do I get the opacity of an element using Javascript?

Question

If I have:

#em {
  opacity:0.5;
}

How do I get #em's opacity using javascript? :D

I've got troubles with the following (it returns nothing):

return document.getElementById("em").style.opacity;

Answer 1

Setting a CSS value in a stylesheet is not the same as setting it through the style property. You need to look at the getComputedStyle method to obtain this (and also currentStyle for older IE).

Answer 2

var em = document.getElementById("em");
var  temp = window.getComputedStyle(em).getPropertyValue("opacity");

Now, the variable temp will have the value of opacity of "em".

Answer 3

document.getElementById("em").style.opacity;

it will work fine if you use inline style .eg.

<div id="em" style="width: 50px; height: 50px; opacity: 0.5;">