How can I test if an input's width was set manually?

Question

HTML

<select id="food">
    <option>Pick Favorite Food</option>
    <option>Banana</option>
    <option>Orange</option>
</select>

<select id="place" style="width: 100px;">
    <option>Pick Favorite Place</option>
    <option>Disneyland</option>
    <option>Hawaii</option>
</select>

JavaScript

$('food').getStyle('width'); //56px
$('place').getStyle('width'); //100px

If no width is specified, the browser sizes the input to fit all of the text dynamically. Obviously this has to happen so you can see your elements.

Is there a way to test if the element was styled manually? Either inline, through a stylesheet, or even through JavaScript?

$('food').getWidth(); //false
$('place').getWidth(); //100px

possible duplicate of [jQuery check if element has a specific style property defined inline](http://stackoverflow.com/questions/11306736/jquery-check-if-element-has-a-specific-style-property-defined-inline) — Alexander, Oct 18 '12 at 21:24
@Alexander - I am curious to find out how to do it from a stylesheet as well as inline, and I'm not using jQuery. :) — Aust, Oct 19 '12 at 16:33

dontGoPlastic · Accepted Answer · 2012-10-19T16:09:53.383

Ryan has the right idea, but since you're using Prototype, you can use readAttribute('style') and trust that the return value came from the style attribute and not through a stylesheet.

Here's a fiddle: http://jsfiddle.net/Q4bRP/

Here's the fiddle's code:

#my-div {
    border: 1px solid green;
    margin-bottom: 10px;
}

-

<div id="my-div">#my-div, click me</div>
<button id="my-button">add inline style to #my-div</button>

-

$('my-div').on('click', 'div', function(event, el) {
    var styleAttrVal = el.readAttribute('style');
    if (styleAttrVal) {
        alert(styleAttrVal);
    } else {
        alert('no inline style set!');
    }
});

$('my-button').on('click', function(event) {
    $('my-div').setStyle({backgroundColor: 'yellow'});
});

You can use a Regex on styleAttrVal to test for whatever inline value you're looking for.

Edit: Regarding the last comment above on using a Regex to pull out what you need: You may have some luck looking through Prototype's source to find something you need. They must be doing something similar already for Element.getStyle to work that you may be able to leverage.

Yeah this is nice. Is there any way to test if the CSS was from a stylesheet as well? — Aust, Oct 19 '12 at 15:45
Not directly. You could use [Element.getStyle](http://api.prototypejs.org/dom/Element/prototype/getStyle/) to read the final applied style then check the attribute style value like in the answer then compare the two. — dontGoPlastic, Oct 19 '12 at 16:05

Ryan Lynch · Answer 2 · 2012-10-18T21:15:55.223

You could accomplish this by checking the style attribute on the element. This will only work if the style is set on the element directly, as it is in your example html.

$.fn.getWidth = function(){
    var style = this.attr('style');
    return !~style.indexOf('width') ? false : style.match(/width\s*:\s*(\w+)\s*;/)[1];
}

EDIT:

Aha, better way. This is a case where jQuery tries to be too smart. Use the style attribute on the dom element itself:

$.fn.getWidth = function(){
    var style = this.get(0).style;
    return style.width === '' ? false : style.width; 
}

How can I test if an input's width was set manually?

2 Answers2