jQuery prüft, ob das Element eine bestimmte Stileigenschaft hat, die inline definiert ist

Ich muss überprüfen, ob einem Element eine definierte CSS-Eigenschaft zugewiesen wurde, aber ich habe einige Probleme mit der Funktion jQuery.css().

Die Eigenschaft, die ich suche, ist Breite.

Wenn das Element keine definierte Breite hat und ich das versuche:

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

Ich erhalte die berechnete Breite des Browsers.

Hier ist ein sehr einfaches (wahrscheinlich stark verbesserungsbedürftiges) Plugin, das ich zusammengestellt habe und das Ihnen den Wert einer Inline-Stileigenschaft (und zurückgeben) liefert undefined wenn diese Eigenschaft nicht gefunden wird):

​(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));

Du kannst es so nennen:

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

Hier ist ein Arbeitsbeispiel.

Beachten Sie, dass nur der Wert für zurückgegeben wird erstes Element im abgestimmten Satz.

Da es zurückkehrt undefined Wenn diese Stileigenschaft nicht gefunden wird, können Sie sie in Ihrer Situation wie folgt verwenden:

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

Aktualisieren

Hier ist eine viel, viel kürzere Version. Ich erkannte, dass prop("style") gibt ein Objekt zurück, keine Zeichenfolge, und die Eigenschaften dieses Objekts entsprechen den verfügbaren Stileigenschaften. Sie können also einfach Folgendes tun:

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

Möglicherweise möchten Sie die Verwendung von ersetzen $.camelCase mit einer benutzerdefinierten Camelcase-Funktion, da die jQuery-Funktion undokumentiert zu sein scheint und wahrscheinlich nicht gut ist, um sich darauf zu verlassen. Ich habe es hier nur verwendet, weil es kürzer ist.

Hier ist ein Arbeitsbeispiel von diesem. Beachten Sie, dass in diesem Fall der Rückgabewert der leere String ist, wenn der Stil nicht auf dem Element gefunden wurde. Das wird sich noch auswerten lassen false, also oben if Aussage sollte noch funktionieren.

Warum nicht einfach:

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

Und dann kannst du es testen mit:

if ( $el.length ) {
    //...
}

Zum Beispiel nach “Breite” suchen:

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

Benutzen .attr um die zu überprüfen style Attribut.

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

Wenn dir die Breite wichtig ist, dann

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

Matthew können Sie überprüfen, ob das Stilattribut undefiniert ist oder nicht

    var attr = $(this).attr('style');
    if (typeof attr !== 'undefined' ) {
   }