Javascript style.opacity undefined

Question

I use Javascript and Mootools for creating a particular HTML page, which includes a javascript file that checks the opacity of an element for a certain operation.

However, on IE, I face this issue of elem.style.opacity giving out a undefined value.

Here is the operation I am doing,

var elem = $('login');
alert(elem.style.opacity);
if(elem.style.opacity == 0)
{
    // Code
}

The alert gives out a correct value of opacity on all browsers except IE.

Any guidance appreciated.

Answer 1

This should point you in the right direction. IE doesn't use opacity:

http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/

Answer 2

You might want to create one or more classes of different opacity. Instead of checking the opacity value, you can check if the element has a class or not and change it if necessary.

<style>
.hasOpacity_opacity {
  opacity: 0.2;
  filter: alpha(opacity = 20);
}
</style>

<script>
var elem = $('login');
alert(elem.style.opacity);
if(!elem.hasClassName('hasOpacity'))
{
    // Code
}
</script>

(This code uses the 'addClassName' from Prototype JS)