Can't Access CSS Selector's Properties from Javascript

Question

Here\'s a very basic question: why is the finishLoading() function in the code below not able to access the \'opacity\' property for the #myStyle CSS selector? The alert doe

Answer 1

Opacity should be a number rather than a boolean. Is it working in any other browseR?

Answer 2

You can get the values set through class only after their computation.

var oElm = document.getElementById ( "myStyle" );
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle)
{
strValue = document.defaultView.getComputedStyle(oElm, null).getPropertyValue("-moz-opacity");
}
else if(oElm.currentStyle)    // For IE
{
strValue = oElm.currentStyle["opacity"];
}

alert ( strValue );

Answer 3

I suggest you take a look at jQuery and some of the posts at Learning jQuery, it will make doing things like this very easy.

Answer 4

The problem is, that element.style.opacity only stores values, that are set inside the element's style attribute. If you want to access style values, that come from other stylesheets, take a look at quirksmode.

Cheers,

Answer 5

this link help

http://www.quirksmode.org/js/opacity.html

function setOpacity(value) {
    testObj.style.opacity = value/10;
    testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

opacity is for Mozilla and Safari, filter for Explorer. value ranges from 0 to 10.