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.

Shame

Answer 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.

Reservoir

Great ..first i though of some reg-ex based solutions..if this work then its great !! – Lollapalooza

@MatthewGrima - I've updated my answer with a much shorter version of that plugin code. Might be worth testing that in a few different browsers though - I've only tried it in Chrome. – Reservoir

Answer 2

Why not just:

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

And then you can test it with:

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

Supersonics

I like it, but this solution will also match 'min-width' and 'max-width', which may be problematic if specifically looking for non-hyphenated 'width'. – Bombproof

Answer 3

Checking for "width" for example:

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

Madden

Answer 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) {
   //...
}

Declination

But how does this check if it has width ? – Lollapalooza

I don't actually care if the element has other styles, I need to know if it has a width defined inside the style attribute. – Shame

@ubercooluk The op only need to check whether has an inline-style. If you want to check width, then could do something like .indexOf('width') !== -1 – Declination

I'll change the question title, but the content of the question is quite clear – Shame

@ubercooluk If it's defined in a CSS definition (either in an external CSS file or a <style> tag) then it's not, by definition, inline. – Francinafrancine

@Declination - What if there was, for example, a border-width property but no width property? – Reservoir

Answer 5

Matthew you can check if style attribute is undefined or not

    var attr = $(this).attr('style');
    if (typeof attr !== 'undefined' ) {
   }

Logician

This is not what the question is asking. It is asking to determine if a width has been defined in the style attribute. – Reservoir