27 votes

jQuery : vérifier si un élément a un attribut CSS

Existe-t-il un moyen de vérifier les parents d'un élément et de trouver le premier qui a un arrière-plan CSS défini, puis de renvoyer cette valeur d'arrière-plan ?

Quelque chose comme :

var background = $('element').parents().has(css('background'));

UPDATE : Voici le code que j'utilise maintenant :

jQuery.fn.getBg = function(){
    var newBackground = this.parents().filter(function() {
        return $(this).css('background-color').length > 0;
    }).eq(0).css('background-color');
    $(this).css('background-color',newBackground); console.log("new background is: "+newBackground);
};

41voto

David Hedlund Points 66192

S'il n'est pas défini, l'extraire donnera une chaîne vide. D'où  

var bg = ('element').parents().filter(function() {
    return $(this).css('background').length > 0;
}).eq(0)

EDIT

Certaines recherches montrent que css('background') sera toujours donne une chaîne vide, ou undefined en fonction du navigateur. css('background-color') retournera correctement la couleur de l'élément en question ; mais aussi des valeurs différentes pour chaque navigateur, il est donc difficile de tester ( transparent dans l'IE, rgba(0,0,0,0) dans firefox/chrome, par exemple, les deux étant des façons précises de spécifier transparent).

jQuery.fn.getBg = function() {
    return $(this).parents().filter(function() {
        // only checking for IE and Firefox/Chrome. add values as cross-browser compatibility is required
        var color = $(this).css('background-color');
        return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
    }).eq(0).css('background-color');
};

8voto

Rabbott Points 1753

Je crois que la bonne façon de procéder est de vérifier la propriété .length.

Dans votre cas, vous voudriez boucler tous vos éléments et vérifier le premier qui répond aux critères suivants

.css('background').length != 0

3voto

Pointy Points 172438
$('selector').parents().filter(function() { return !!$(this).css('background'); });

1voto

hurikhan77 Points 3868

J'essaierais quelque chose comme ça :

var background = 0;
$('element').parents().each(function() {
  if (!background && ((e = $(this).css('background')).length > 0)) background = e;
});

Je ne suis pas sûr que cette clause if exacte fonctionne, mais le each() devrait faire l'affaire. La première correspondance remplira la variable d'arrière-plan et ignorera le reste des parents en remontant la chaîne.

Editar: Modifié pour résoudre css('background') correctement qui peut émettre une chaîne vide. De plus, each() ne transmet pas l'élément, mais l'index et l'élément, donc faire usage de this à la place, et supprime tous les paramètres.

-6voto

SDReyes Points 3989

Vous pourriez faire quelque chose comme :

$('#test').parents().has(css('background')).filter(':first');

J'espère que cela vous aidera : )

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X