JQuery détecter si la classe css a une image de fond

Question

Je suis en train de chercher à détecter si une certaine classe css a une image de fond appliquée.

Je peux simplement faire ce qui suit pour tester si une background-image est présente :

if ($('.vc_custom_1498122672544').css('background-image') != 'none') {
  alert('Il y a une image de fond');
}

Cependant, la classe ci-dessus est générée de manière dynamique et ne sera pas toujours connue.

La div à laquelle cette classe est attachée a également quelques autres classes appliquées. J'ai donc essayé ce qui suit :

if ($('.vc_row-has-fill').css('background-image') != 'none') {
  alert('Il y a une image de fond');
}

Cela ne renvoie rien car le background-image cible spécifiquement la classe .vc_custom_1498122672544 et non .vc_row-has-fill.

Y a-t-il quelque chose que je peux faire pour détecter la background-image avec la classe .vc_row-has-fill ?

Answer 1

En fait, vous pouvez vérifier si une classe a une autre classe ou non. Par exemple, un div avec la classe .vc_row-has-fill a la classe .vc_custom_1498122672544 ou non. si c'est le cas, vous pouvez ensuite vérifier si la classe .vc_custom_1498122672544 a un background-image ou non

$('.vc_row-has-fill').each(function(){
    if ($(this).hasClass('vc_custom_1498122672544')){
       if ($('.vc_custom_1498122672544').css('background-image') != 'none') {
          alert('Il y a une image de fond');
        }
    }
});

demo : https://jsfiddle.net/9y52ef4c/

je ne suis pas sûr que cela soit ce que vous voulez réaliser ou non. j'espère que cela vous aidera

Answer 2

En fait, vous pouvez utiliser l'approche de ce post : jquery - Obtenir les valeurs des propriétés CSS pour une classe non encore appliquée

Le code à partir de là :

var getCSS = function (prop, fromClass) {

    var $inspector = $("

Essentiellement, vous pouvez appeler getCSS('backgroundImage', ***Une classe pour tester une image de fond***) et l'utiliser pour une méthode d'élimination.

Cela vous aide-t-il dans votre situation ?

Answer 3

Il devrait idéalement fonctionner, mais sinon, vous pouvez vérifier si la classe ressemble à vc_custom_1498122672544 commence toujours par vc_custom_ et qu'elle définit toujours l'arrière-plan de l'élément ayant la classe vc_row-has-fill, alors vous pouvez vérifier si l'élément a une classe qui commence par vc_custom comme ci-dessous.

if($(".vc_row-has-fill").is("[class*='vc_custom_']"))
{
   alert('Il y a une image d'arrière-plan');
}

Ou en utilisant la fonction mentionnée dans le lien publié par @hallleron, vous pouvez vérifier comme ci-dessous.

$(document).ready(function() {
  function hasBackgroundImageSet(fromClass) {

   var $inspector = $("

Answer 4

Ceci est la solution à laquelle je suis arrivé. Je sais que la classe personnalisée est toujours la 3ème classe appliquée à la div. Assez simple finalement :

$('.vc_row-has-fill').each(function(){
    var classes = $(this).attr('class').split(' ');
    var imgClass = classes[3];
    if ($('.' + imgClass).css('background-image') != 'none') {
      alert('Il y a une image de fond');
    }
});