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 ?
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");
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.
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.
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.
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()
.
You can use isvisible and is hidden also
if ( $('#test').is(':visible')){
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With