web-dev-qa-db-ja.com

要素にインラインで定義された特定のスタイルプロパティがあるかどうかのjQueryチェック

要素に定義されたcssプロパティがあるかどうかを確認する必要がありますが、jQuery.css（）関数の使用に問題があります。

私が探しているプロパティは幅です。

要素の幅が定義されていない場合、これを試します：

if(base.$element.css('width') !== 'undefined')

ブラウザの計算された幅を取得します。

jquerycssinline-styles
31
Matthew Grima

これは、インラインスタイルプロパティの値を取得する（そして、そのプロパティが見つからない場合はundefinedを返す）非常にシンプルな（おそらく改善が必要な）プラグインです。

_​(function ($) {
    $.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };
}(jQuery));
_

次のように呼び出すことができます。

_//Returns value of "width" property or `undefined`
var width = $("#someElem").inlineStyle("width");
_

実施例 です。

一致したセットの最初の要素の値のみを返すことに注意してください。

そのスタイルプロパティが見つからない場合はundefinedを返すため、次のように状況で使用できます。

_if (base.$element.inlineStyle("width")) {
    // It has a `width` property!
}
_

更新

これは非常に短いバージョンです。 prop("style")は文字列ではなくオブジェクトを返し、そのオブジェクトのプロパティは利用可能なスタイルプロパティに対応していることに気付きました。だからあなたはこれを行うことができます：

_(function ($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));
_

_$.camelCase_の使用をカスタムのラクダケース関数に置き換えたい場合があります。jQueryの関数はドキュメント化されていないようで、おそらく依存するのが適切ではないからです。短いのでここで使用しました。

これが 実行例 です。この場合、要素でスタイルが見つからなかった場合、戻り値は空の​​文字列になることに注意してください。それでもfalseと評価されるため、上記のifステートメントは引き続き機能します。

48
James Allardice

なぜだけではありません：

var $el = $('element[style*="width"]');

そして、あなたはそれをテストすることができます：

if ( $el.length ) {
    //...
}
26
Alain Jacomet Forte

使用する .attrstyle属性を確認します。

if(base.$element.attr('style').length > 0) {
   //...
}

幅が気になるなら、

if(base.$element.attr('style').indexOf('width') !== -1) {
   //...
}
8
xdazz

たとえば、「幅」の確認：

if ($(element).prop("style")["width"] !== '')
{...}
8
Angelo