Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine if CSS property is set to a certain value?

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 ?

like image 575
Tom Avatar asked May 08 '11 17:05

Tom


People also ask

How can check CSS property value in jQuery?

Get a CSS Property Value You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax: $(selector). css("propertyName");

How do you get the value of a style property for an element in a set of matched elements in jQuery?

The jQuery css() methods enables you to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

How do you retrieve a CSS property value of an element?

First, you need to select the element with querySelector . Then, you use getComputedStyle to get the element's styles. If you log style , you should see an object that contains every CSS property and their respective values. You can also see this object in Chrome's and Firefox's dev tools.

What does a property value specify CSS?

The specified value of a CSS property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules: If the document's style sheet explicitly specifies a value for the property, the given value will be used.


2 Answers

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

like image 140
Pekka Avatar answered Oct 18 '22 09:10

Pekka


You can use isvisible and is hidden also

if ( $('#test').is(':visible')){ 
like image 23
kobe Avatar answered Oct 18 '22 09:10

kobe