jQuery .css () ne fonctionne pas

J’essaie de modifier les CSS en ligne à l’aide de jQuery sur mon site Web. Jusqu’ici j’ai essayé le code suivant:

 jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)"); jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)");

J’ai aussi essayé:

  jQuery(document).ready(function(){ jQuery(init); function init() { jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)"); jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)"); } });

  jQuery(document).ready(function(){ jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)"); jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)"); });

Cependant, rien ne fonctionne. Il est intéressant de noter que le code fonctionne lorsque le mode de développement Cloudflare est activé, mais ne le fonctionne pas (même après la purge du cache Cloudflare et la désactivation du chargeur de fusées / minification).

Appréciez toute aide!

Edit: l’intérêt de ce code est de remplacer le CSS en ligne! Important et de changer le fond pour qu’il soit complètement transparent, c’est-à-dire une opacité nulle. Donc, rgba (0,0,0,0) est correct et voulu.

Le code a pour but de supprimer le style “important” en ligne, voir:

  0    Share

Vous appelez cette fonction avant que DOM ne soit complètement chargé.

Donc jQuery(".shareaholic-share-button-container") renvoie un tableau vide. (parce que cet élément n’est même pas créé lorsque vous appelez ce code)

Si .shareaholic-share-button-container est créé directement à partir d’un fichier html, placez votre javascript au bas de la page.
Si .shareaholic-share-button-container est créé de manière dynamic, appelez javascript après le rendu complet.
Par exemple, dans votre cas, vous pouvez utiliser le rappel d’événement prêt pour une fenêtre.
```
 jQuery(window).ready(function(){ jQuery(".shareaholic-share-button-container").css("background-color", "red");}); 
```

Edit: Ok, votre problème est 2, mais il est créé de manière asynchrone, vous ne savez donc pas à quelle heure il a été créé et vous ne pouvez même pas injecter de code source juste après.
Une solution consiste à observer chaque événement de création d’élément DOM.

 jQuery('body').bind("DOMSubtreeModified", function(e) { var $tmp = jQuery(e.target).find(".shareaholic-share-button-container"); if($tmp.length){ $tmp.css("background-color", "rgba(0,0,0,0)"); } });

ATTENTION Cette solution ne garantit pas de travailler sur un environnement de navigateur croisé. et peut causer des problèmes de performance

vous définissez une couleur d’arrière-plan mais elle est absente, car vous définissez l’opacité 0 (zéro). Essayez par exemple 50% d’opacité

 jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,50)"); // 50% opacity

puis personnalisez votre opacité. 0 est l’opacité zéro. La transparence est une valeur> 0 et <100. Choisissez la valeur de votre transparence.

Si votre besoin est 100% transparent, JQuery fournit

 $(".shareaholic-share-button-container").css('background-color','transparent');

Pour écraser! Important css, vérifiez ce lien: Comment écraser le css contenant ‘! Important’ en utilisant jquery?

Essayez ceci: Si rgba ne fonctionne pas dans jQuery, alors background-color propriété background-color et l’ opacity peuvent être définies en écrivant le code de deux manières différentes. De plus !important ne fonctionne pas dans jQuery, utilisez-le uniquement en css