32

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.

Matthew Grima
  • 1,513
  • 5
  • 25
  • 40

5 Answers5

48

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.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • Great ..first i though of some reg-ex based solutions..if this work then its great !! – coolguy Jul 03 '12 at 08:11
  • 4
    @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. – James Allardice Jul 03 '12 at 08:36
27

Why not just:

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

And then you can test it with: 

if ( $el.length ) {
    //...
}
Alain Jacomet Forte
  • 4,575
  • 6
  • 29
  • 41
  • 2
    this is by far the best solution ! Thank you ! – pmrotule May 11 '14 at 16:34
  • 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'. – Drey Sep 20 '16 at 18:00
10

Checking for "width" for example:

if ($(element).prop("style")["width"] !== '')
{...}
Angelo
  • 145
  • 2
  • 9
8

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) {
   //...
}
xdazz
  • 158,678
  • 38
  • 247
  • 274
-3

Matthew you can check if style attribute is undefined or not 

    var attr = $(this).attr('style');
    if (typeof attr !== 'undefined' ) {
   }
Ramesh R C
  • 644
  • 7
  • 17