2

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
4

2 回答 2

1

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

这是一个小提琴：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做类似的事情，你可以利用这些事情。

于 2012-10-19T15:26:44.467 回答
0

您可以通过检查元素的样式属性来完成此操作。这仅在直接在元素上设置样式时才有效，就像在您的示例 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; 
}
于 2012-10-18T21:00:26.540 回答