Ajouter le fonction "gras" dans un javascript

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
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 toutes !

J'étais venue vous voir l'année dernière par rapport à un javascript qui me permettait, lorsque je changeais de personnage via une base de données créé et attribué à un compte forum, d'attribuer une couleur.

Compte A : Personnage B attribué > Javascript > charge la couleur x du personnage B rattaché au compte A.

Je souhaiterai savoir comment ajouter dans ce javascript la possibilité de mettre également ce texte en gras pour plus de visibilité. En effet, quitte à ce que la couleur soit automatisée (parmi la centaine disponible, s'en souvenir est parfois compliqué lors d'un JDR), autant pouvoir faire le gras également ! ^^

J'ai tenté d'y palier en faisant en sorte d'écrire dans mon CSS : font[b] ... échec voué.
Je me suis donc dit que ce serait mieux d'aller directement à la source d'où provient mon texte.

Voici le code en question :

Code:

var pseudo;
var color;
function PseudoCouleur(pseudo,color){
  this.pseudo = pseudo;
  this.color = color;
}
 
var pseudos_couleur = new Array();
pseudos_couleur[0]=new PseudoCouleur("Conteuse","#6328D9");
pseudos_couleur[1]=new PseudoCouleur("X","#009999");
pseudos_couleur[2]=new PseudoCouleur("XX","#999999");
pseudos_couleur[3]=new PseudoCouleur("XXXX","#00ccff");
pseudos_couleur[4]=new PseudoCouleur("XXX","#ff3366");
pseudos_couleur[5]=new PseudoCouleur("X","#ff9999");
pseudos_couleur[6]=new PseudoCouleur("","#ffcc66");
function estPseudoCouleur(pseudo){
  for(i = 0; i < pseudos_couleur.length; i++){
    if(pseudo == pseudos_couleur[i].pseudo){
      return pseudos_couleur[i];
    }
  }
  return null;
}
 
$(function() {
  //DANS LES SUJETS CLASSIQUES
  $(".name strong").each(function(){
    var pseudo_couleur = estPseudoCouleur($(this).text());
    if(pseudo_couleur != null){
      $(this).parents("tr.post").find("div.postbody div").css('color', pseudo_couleur.color);
    }
  });
});

Je vous remercie pour ceux qui voudront m'aider.

Cordialement

[Toryudo]

Bonjour !
A priori, sans tester, je propose de changer la ligne suivante :

Code:

$(this).parents("tr.post").find("div.postbody div").css('color', pseudo_couleur.color);

Pour qu'elle devienne :

Code:

$(this).parents("tr.post").find("div.postbody div").css('color', pseudo_couleur.color).css('font-weight', 'bold');

On lui rajoute juste le CSS font-weight: bold; pour le mettre en gras donc !

[Kaehlyth]

Ah voilà !!! Font-weight ! Pour une raison obscure j'étais sur font[b] ...

Merci beaucoup, ça fonctionne à merveille !

En fait ça palliait au système où je voulais que ce CSS :

Code:

font[color] {text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;}

s'applique au texte mis automatiquement en couleur par ce code javascript... car en effet, comme la couleur est automatiquement mise, le code ne reconnait pas que "font color" a été utilisé puisque je n'applique pas la balise "color".

Auriez vous une idée pour cela ?

Voici l'exemple où on voit que l'ombre noir permet de détacher le texte du fond de forum et le rend, à mon sens et pour nos yeux, plus lisible :

[Toryudo]

Je comprends... la balise [color] se transforme en balise <font color="">, et c'est grâce à ça que vous pouvez mettre un CSS spécial sur les textes en couleur. Dans notre cas, le script ajoute simplement un style="color: ;" dans une balise existante... et dans ce cas, difficile de remettre du CSS par-dessus.
Du coup, faisons autrement : plutôt que d'ajouter le font-weight: bold directement, on va ajouter une class à la zone en question (que j'appelle ici classfont, vous pouvez la changer par ce que vous voulez) :

Code:

$(this).parents("tr.post").find("div.postbody div").css('color', pseudo_couleur.color).addClass('classfont');

Grâce à ça, on va pouvoir faire ce qu'on veut en CSS avec cette nouvelle class, comme par exemple appliquer le même CSS que font[color], comme ceci :

Code:

font[color], .classfont {text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;}

Vous pouvez rajouter ce que vous voulez, ça s'appliquera aux deux à chaque fois.

[Kaehlyth]

Merci beaucoup, donc, en javascript si je comprends bien, si je veux ajouter une condition, j'ajoute "addclass" !
(résumé très simple j'en conviens)

Merci beaucoup, encore une fois, vous m'avez bien aidé !

Voici le résultat