Javascript venant ajouter une class à une div existante

[Katerinata]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous et j'espère que vous allez bien !

Je suis plongée dans les templates et le javascript/jquery et je voulais savoir si c'était possible "d'upgrade" un code javascript que j'ai trouvé. En effet, j'aimerais ajouter une nouvelle class à une div existante en utilisant du javascript suivant une condition.

Voici le code de javascript sur lequel je me suis basée :

Code:

<script type="text/javascript">$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('#categoriewrapper').css("color", color);});});</script>

Et voici une version simplifiée de mon template (viewtopic_body) :

Code:

<div id="categoriewrapper">
<div class="cat2">
 <div class="username">
  <a href="/u1">
   <span style="color:#8d9e6a"><strong>Admin</strong></span>
  </a>
 </div>
</div>
</div>

Ce code fonctionne parfaitement. Il me permet d'appliquer la couleur du membre ayant réalisé le post, sur une autre div id (en l'occurence ma <div id="categoriewrapper"> ici qui prend la  fonction css 'color').

Cependant, je voulais savoir si certains savaient s'il était possible d'utiliser ce code pour ajouter une class à une div existante.
J'ai essayé par mes moyens en me renseignant un peu sur le javascript et j'en suis arrivée à ceci (le code ne fonctionne pas mais il va me permettre de vous expliquer ma démarche) :

LE HTML (toujours le même) :

Code:

<div id="categoriewrapper">
<div class="cat2">
 <div class="username">
  <a href="/u1">
   <span style="color:#8d9e6a"><strong>Admin</strong></span>
  </a>
 </div>
</div>
</div>

Code:

$( document )
           .ready(function() {$('a[href*="/u"] span')
           .each(function(){var color = $(this).css("color");
           $(this).closest('#categoriewrapper').css("color", color);});});
          
var x = document.getElementById("categoriewrapper");
  if (window.getComputedStyle(x).color === "#8d9e6a") {
          
    var xyz = document.querySelector('.cat2');
    xyz.classList.add('nouvelleclass')}

Je vais découper chaque partie, en notant que la première partie n'a pas bougé :

Code:

$( document )
           .ready(function() {$('a[href*="/u"] span')
           .each(function(){var color = $(this).css("color");
           $(this).closest('#categoriewrapper').css("color", color);});});

Donc dans cette partie, je demande au javascript de récupérer la couleur du span du lien (ici c'est #8d9e6a). Et ma div #categoriewrapper obtient dans son css le style "color:rgb(141, 158, 106)" équivalent à "#8d9e6a". Donc jusque là, tout va bien.

Ensuite :

Code:

var x = document.getElementById("categoriewrapper");
  if (window.getComputedStyle(x).color === "#8d9e6a")


je crée la variable nommée x pour sélectionner ma div id #categoriewrapper
et je demande à vérifier que le style css de ma color de x (donc #categoriewrapper) est bien égal à #8d9e6a et si c'est le cas de faire la chose suivante :

Code:

{var xyz = document.querySelector('.cat2');
    xyz.classList.add('nouvelleclass')}

puisque c'est vrai (on a vérifié plus tôt que #categoriewrapper prenait bel et bien cette couleur), je lui dis de créer la variable xyz et sélectionner ma div .cat2
puis je lui demande de rajouter une nouvelle class à .cat2 en l'appelant nouvelleclass

Normalement, je devrais obtenir le résultat suivant :

Code:

<div id="categoriewrapper" style="color: rgb(141, 158, 106);">
<div class="cat2 nouvelleclass">
 <div class="username">
  <a href="/u1">
   <span style="color:#8d9e6a"><strong>Admin</strong></span>
  </a>
 </div>
</div>
</div>

Mais ce n'est pas le cas et j'obtiens :

Code:

<div id="categoriewrapper" style="color: rgb(141, 158, 106);">
<div class="cat2">
 <div class="username">
  <a href="/u1">
   <span style="color:#8d9e6a"><strong>Admin</strong></span>
  </a>
 </div>
</div>
</div>

Quelque chose semble donc coincer dans la deuxième partie de mon javascript et je voulais savoir si quelqu'un avait une idée pour m'aider à le faire fonctionner.

Merci beaucoup !

[Katerinata]

Après quelques heures d'acharnement, j'ai réussi à faire ce que je voulais par moi-même
Désolée du dérangement et bonne journée à tous !

J'ai passé le sujet en résolu