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探しているインライン値をテストできます。

編集:正規表現を使用して必要なものを引き出すことに関する上記の最後のコメントについて:プロトタイプのソースを調べて、必要なものを見つけることができるかもしれません。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 に答える