jQuery check if element has a specific style property defined inline

Question

I need to check whether an element has a defined css property given to it, but I'm having some trouble using the jQuery.css() function.

The property I'm looking for is width.

If the element does not have a defined width and I try this:

if(base.$element.css('width') !== 'undefined')

I get the browser's computed width.

Solution 1

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.

Solution 2

Why not just:

var $el = $('element[style*="width"]');

And then you can test it with:

if ( $el.length ) {
    //...
}

Solution 3

Checking for "width" for example:

if ($(element).prop("style")["width"] !== '')
{...}

Solution 4

Use .attr to check the style attribute.

if(base.$element.attr('style').length > 0) {
   //...
}

If you care about the width, then

if(base.$element.attr('style').indexOf('width') !== -1) {
   //...
}

View more solutions