Determine if CSS property is set to a certain value?

Question

Just wondering how to determine a jQuery statement like this

if( $(\"#test\").css(\'display\', \'block\') == true) {
   return true;
}

Basicall

Answer 1

Use

if( $("#test").css('display') == 'block') {

I'm fairly sure .css(), returning a calculated value, will always return a lower case result - the docs say nothing on this. To make totally sure, you could do a

if( $("#test").css('display').toLowerCase() == 'block') {

while you can rely on display giving reliable results, note that some CSS properties will not always show up the way they were defined. For example

a { color: red }

will turn out rgb(255,0,0); when queried using .css().

Answer 2

I think the only way to test this is by comparing with actual values:

function displayHidden(elem) {
    return $(elem).css('display') === 'hidden';
}

Answer 3

You can use isvisible and is hidden also

if ( $('#test').is(':visible')){