Check if opacity is set

Question

Hi there. I have a script that animates opacity but if the opacity has not been previously set then it just disappears. I just wondered if there was a way to check if the opacity has been set. Thanks in advance!

Answer 1

Generally, CSS properties that aren't set return an empty value in JavaScript.

Update: It appears that element.style will only return values that were previously set via JavaScript or specified in the inline style. To get the true value of a CSS property, you need to use the so-called "computed style" of an element.

Here's a function (copied from quirksmode) that does this:

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

However, this will return 1.0 (the default value) if the opacity has not been set, so there's really no way to know if the opacity was actually defined in CSS or not.