Can't Access Css Selector's Properties From Javascript

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 doesn't displ

Solution 1:

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");
}
elseif(oElm.currentStyle)    // For IE
{
strValue = oElm.currentStyle["opacity"];
}

alert ( strValue );

Solution 2:

The problem is, that element.style.opacityonly 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,

Solution 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.

Solution 4:

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

Solution 5:

this link help

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

functionsetOpacity(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.