Jquery: How to Check If the Element Has Certain CSS Class/Style

Jquery: How to check if the element has certain css class/style

if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}

jquery addClass to element if css has style

You could do it this way:

$('#yourElement').addClass(function(index, currentClass) {
    return $(this).css('position') == 'absolute' ? 'xxx' : '';
});

For more information on the syntax take a look at the API for .addClass().

jQuery check if element has a specific style property defined inline

Here's a very simple (probably in much need of improvement) plugin I've thrown together that will get you the value of an inline style property (and return undefined if that property is not found):

​(function ($) {
    $.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };
}(jQuery));

You can call it like this:

//Returns value of "width" property or `undefined`
var width = $("#someElem").inlineStyle("width");

Here's a working example.

Note that it will only return the value for the first element in the matched set.

Since it returns undefined when that style property is not found, you can use it in your situation like this:

if (base.$element.inlineStyle("width")) {
    // It has a `width` property!
}

---

Update

Here's a much, much shorter version. I realised that prop("style") returns an object, not a string, and the properties of that object correspond to the available style properties. So you can just do this:

(function ($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

You may want to replace the use of $.camelCase with a custom camelcase function, since the jQuery one appears to be undocumented and is probably not good to rely upon. I just used it here as it's shorter.

Here's a working example of that one. Note that in this case, the return value will be the empty string if the style was not found on the element. That will still evaluate to false, so the above if statement should still work.

jQuery check if element has css attribute

if( $('#element').css('text-shadow') != null )  { 
    /*success*/ 
} 
else { 
    /*does not have*/ 
}

Determine if CSS property is set to a certain value?

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 Topics