Determine if CSS property is set to a certain value?

jquery attributes hide show
Tom picture Tom · May 8, 2011 · Viewed 94k times · Source

Just wondering how to determine a jQuery statement like this

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

Basically, I want to be able to determine IF an element has is currently being shown or hidden via the "display:block" attribute ?

Answer

Pekka picture Pekka · May 8, 2011

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

Related questions

set option "selected" attribute from dynamic created option

I have a dynamically created select option using a javascript function. the select object is <select name="country" id="country"> </select> when the js function is executed, the "country" object is <select name="country" id="…

Read More
How to change an element's title attribute using jQuery

I have an form input element and want to change its title attribute. This has to be easy as pie, but for some reason I cannot find how to do this. How is this done, and where and how should …

Read More
Jquery - How to get the style display attribute "none / block"

Is there a way to get the style: display attribute which would have either none or block? DIV : <div id="ctl00_MainContentAreaPlaceHolder_cellPhone_input_msg_container" class="Error cellphone" style="display: block;"> <p class="cellphone" style="display: …

Read More