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属性，不是来通过样式表。< / p>

这是一个小提琴：http://jsfiddle.net/Q4bRP/

这是小提琴的代码：

#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上的正则表达式来测试您要查找的内嵌值。

编辑：关于使用正则表达式提取所需内容的上述最后一条评论：您可能有一些运气通过Prototype的来源找到您需要的东西。他们必须为Element.getStyle做类似的工作，以便你可以利用它。

Answer 2

您可以通过检查元素的style属性来完成此操作。这仅在直接在元素上设置样式时才有效，就像在示例html中一样。

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

编辑：

啊，更好的方式。这是jQuery试图太聪明的情况。在dom元素本身上使用style属性：

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

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

2 个答案: