17

I'm retrieving the width of elements using jQuery and would prefer it if I could have an indication of whether there was an explicit width (and height) specified.

<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>

This will alert the implicit width of the div in terms of how many pixels it takes up on the client's screen. Is there any way that if the width is either missing or set as width: auto that it can be verified using jQuery?

That is, instead of the above example returning an integer, it would return either auto or undefined. Or, alternatively, is there an equivalent of a isAuto function?

Elle H
  • 11,837
  • 7
  • 39
  • 42
  • A slightly different but related question: http://stackoverflow.com/q/8816660/583539 – moey Jan 11 '12 at 09:56

6 Answers6

10

This will get either string "auto" or "180px" on absolute values.

$('element').prop('style').width

for width or 

$('element').prop('style').height

for height.

prdatur
  • 1,010
  • 1
  • 14
  • 20
9

I don't believe it's possible for the moment. At least not in any other browser than IE. IE implements element.currentStyle which represents styles at they were written in the CSS file. On the other hand, the rest of the browsers implement window.getComputedStyle which returns the computed values of those styles. That's what you receive there, a numeric value instead of auto.

The only way around it would be to parse CSS declarations from document.styleSheets.

References:

Ionuț G. Stan
  • 176,118
  • 18
  • 189
  • 202
  • See @prdatur 's answer on .prop(). This can return 'auto'. – Robert Waddell Dec 10 '15 at 21:10
  • 1
    @RobertWaddell that only works for styles declared inside a `style` *attribute*. It won't work for anything else. https://jsfiddle.net/6m3p4rqp/ – Ionuț G. Stan Dec 11 '15 at 13:30
  • @ionut-g-stan interestingly, there is middle ground: if width is set to auto programmatically (jQuery), using .prop() to retrieve width does work. No wonder there is inconsistency among solutions on this. It seems to work if set inline or programmatically, but not if set purely in CSS rules. You can check out this fiddle to see the above note in action. https://jsfiddle.net/bvh1e5ud/ By the way, I would remove my downvote, but it is locked in. – Robert Waddell Jan 14 '16 at 20:47
4

$('#test')[0].style.width=="auto" should work: http://jsfiddle.net/KxTLE/ and http://jsfiddle.net/KxTLE/1/ Try 

jQuery.fn.isAuto=function() {
if(this[0]) {
    var ele=$(this[0]);
    if(this[0].style.width=='auto' || ele.outerWidth()==ele.parent().width()) {
        return true;
    } else {
        return false;
    }
}
return undefined;
};

And example: http://jsfiddle.net/KxTLE/6/

Brandon Boone
  • 16,281
  • 4
  • 73
  • 100
Alex
  • 1,327
  • 2
  • 11
  • 20
  • Nice concept, but this.style is limited strictly to inline styles. I guess I didn't specify, but that's obviously going to be a bit of a problem. Though by the looks of it, there's going to be a problem no matter what. – Elle H Aug 25 '10 at 15:43
3

As far as I know, there is no native jQuery function to detect auto widths or heights. So I wrote a plugin to do it.

$.fn.isAuto = function(dimension){
    if (dimension == 'width'){
        var originalWidth = this.innerWidth();
        var marginLeft = parseInt(this.css('margin-left'));
        var testMarginWidth = marginLeft+50;
        this.css('margin-left', testMarginWidth);
        var newWidth = this.innerWidth();
        this.css('margin-left', marginLeft);
        if(newWidth<originalWidth){
            return true;    
        }
        else{
            return false;
        }
    }
    else if(dimension == 'height'){
        var originalHeight = this.height();
        this.append('<div id="test"></div>');
        var testHeight = originalHeight+500;
        $('#test').css({height: testHeight});
        var newHeight = this.height();
        $('#test').remove();
        if(newHeight>originalHeight){
            return true;    
        }
        else{
            return false;
        }
    }
};

Originally, I had written it to do height, so I just expanded it to include width. You just call it like this:

$('#element').isAuto('width');

or

$('#element').isAuto('height');

Here is a fiddle demonstrating the plugin's functionality.

zsaat14
  • 1,110
  • 2
  • 10
  • 20
  • This gave me the hint I needed. I needed to check if a block has had its height set manually or not. Quickly adding a 1px div and checking if the height changed seems to do the trick. Well... at least in Chrome so far. – notacouch Nov 05 '14 at 19:39
  • Your isAuto('width') did not work in my app in IE10. Changing the margin had no effect (not even a marginal one ;) ) on the innerWidth. The attached code which is more similar to the height code did work properly though. – Brandon Barkley Sep 23 '15 at 19:43
0

I am not quite sure if I am answering your question correctly, but if you use the width() function this will give you an integer representing the rendered width in pixels.

Giles Smith
  • 1,952
  • 15
  • 17
  • 1
    Yes, the problem it does that even if there's no width explicitly specified in the CSS for the element.
    will return an integer value. I want it to return "auto" (or to find a way to tell whether it's auto or not).     – Elle H Aug 24 '10 at 14:55
  • 3
    This is a tough question, because even using `$('element').css("width");` seems to always return a pixel width value for an object. Even if it's set to 100%. This is essentially the same as using the getComputedStyle suggested in the first answer. – Nilloc Aug 25 '10 at 15:46
0
  1. create function
  2. pass css element id to function
  3. write a case where statement to be performed on the width property of the element id

NOTE: to use on mulitple elements would be wise to use a loop with an array of element names

elitepraetorian
  • 43
  • 4