javascript - 如何测试输入的宽度是否是手动设置的？

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

如果未指定宽度，浏览器会调整输入大小以动态适应所有文本。显然，这必须发生，这样您才能看到您的元素。

有没有办法测试元素的样式是否是手动设置的？是内联、通过样式表，还是通过 JavaScript？

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

Answer 1

Ryan 的想法是正确的，但由于您使用的是 Prototype，您可以使用 readAttribute('style') 并相信返回值来自 style 属性，不是 通过样式表。

这是一个 fiddle :http://jsfiddle.net/Q4bRP/

这是 fiddle 的代码:

#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'});
});​

您可以在 styleAttrVal 上使用 Regex 来测试您正在寻找的任何内联值。

编辑:关于上面关于使用 Regex 提取所需内容的最后一条评论:您可能运气好通过 Prototype 的源代码找到您需要的内容。他们一定已经在为 Element.getStyle 做类似的事情了。工作，你可以利用。