web-dev-qa-db-fra.com

jQuery vérifie si l'élément a une propriété de style spécifique définie en ligne

J'ai besoin de vérifier si un élément a une propriété css définie qui lui est donnée, mais j'ai du mal à utiliser la fonction jQuery.css ().

La propriété que je recherche est la largeur.

Si l'élément n'a pas de largeur définie et j'essaye ceci:

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

J'obtiens la largeur calculée du navigateur.

jquerycssinline-styles
31
Matthew Grima

Voici un plugin très simple (qui a probablement besoin d'être amélioré) que j'ai jeté ensemble qui vous donnera la valeur d'une propriété de style en ligne (et retournera undefined si cette propriété n'est pas trouvée):

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

Vous pouvez l'appeler comme ceci:

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

Voici un exemple de travail .

Notez qu'il ne renverra que la valeur du premier élément dans l'ensemble correspondant.

Puisqu'il renvoie undefined lorsque cette propriété de style n'est pas trouvée, vous pouvez l'utiliser dans votre situation comme ceci:

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

Mise à jour

Voici une version beaucoup, beaucoup plus courte. J'ai réalisé que prop("style") renvoie un objet, pas une chaîne, et les propriétés de cet objet correspondent aux propriétés de style disponibles. Vous pouvez donc simplement faire ceci:

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

Vous voudrez peut-être remplacer l'utilisation de $.camelCase Par une fonction camelcase personnalisée, car celle de jQuery semble être non documentée et il n'est probablement pas bon de s'y fier. Je l'ai juste utilisé ici car il est plus court.

Voici un exemple de travail de celui-ci. Notez que dans ce cas, la valeur de retour sera la chaîne vide si le style n'a pas été trouvé sur l'élément. Cela sera toujours évalué à false, donc l'instruction if ci-dessus devrait toujours fonctionner.

48
James Allardice

Pourquoi pas seulement:

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

Et puis vous pouvez le tester avec:

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

Utilisation .attr pour vérifier l'attribut style.

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

Si vous vous souciez de la largeur, alors

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

Vérification de la "largeur" ​​par exemple:

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