Modifier couleur Label For dynamiquement [Résolu]

Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
- - Dernière réponse : sonoboss
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
- 7 avril 2007 à 14:38
Bonjour,

Je voudrais savoir comment modifier le color d'un "label for" en Js... J'arrive seulement à modifier la couleur de l'input associé...
document.FrmCont.nom.label.style.color='red';

En fait je voudrais modifier le color et aussi le contenu mais la couleur, ce serait déja énorme!

D'avance merci bcp!
Afficher la suite 

14 réponses

Meilleure réponse
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
3
Merci
Bonjour,

met lui un id... c'est un élément comme un autre...
ch'tit exemple ?

<script type="text/javascript">
function modif()
{
    var l=document.getElementById("rlab");
    l.style.color="#FF0000";
    l.style.backgroundColor="#FFFF00";
    l.innerHTML="modifié";
}
</script>

<label for=r1 id="rlab">exemple</label>

<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 215 internautes nous ont dit merci ce mois-ci

Commenter la réponse de cs_bultez
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
3
Merci
B
onjour...
Je pense qu'il eut été sympa de mettre ta soluce pour les Foreumeux qui peuvent être intéressés...

Pour ton problème de className essaies l'exemple si dessous

<html>
<head>
<title>Test Label className</title>
<style type="text/css">
.T1 {
  color : #0000c0;
  font-size : 15px;
  font-family : Verdana;
  border: 1px solid #0000ff;
}
.T2 {
  color : #c00000;
  font-size : 15px;
  font-family : Verdana;
  padding : 50px;
  margin : 10px;
  border: 1px solid #ff0000;
}
</style>
</head>

<label id="L_FOR1" for="FOR1" class="T1">Label qui change de className</label>

[javascript:void(0); className = T1]

[javascript:void(0); className = T2]

</html>

Cela marche parfaitement...

;0)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 215 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
0
Merci
Bonjour, déja les propriétés css ce sont style.backgroundColor (background-color dans les balises styles), style.color pour la couleur du texte, et je crois les propriétés javascript pour le contenu c'est innerHTML="code html" ou innerText="texte".

<hr /><hr />
Stfou
Commenter la réponse de stfou
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Je ne peux que m'incliner devant ce puit de conaissance...

Merci BCP!
Commenter la réponse de sonoboss
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Ptite question subsidiaire si je puis me permettre...
Comme puis-je revenir au style initial (Css) après une modification par Js ?

D'avance merci!
Commenter la réponse de sonoboss
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
je pense qu'il te faudrait une doc.  j'use de SelfHTML en français, téléchargeable
ici le .chm ( existe aussi en version .htm )
        regardes donc du coté de .className
<hr />                Cordialement        Bul     [mon Site]     [M'écrire]<hr />
Commenter la réponse de cs_bultez
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Merci de ta réponse.

J'ai DL la doc et il s'agit bien de classname. Malgrès cela, je n'arrive pas à appliquer le style en question... (fichier css lié)
Je passe l'Id du label a modifier dans ma fonction demodif :

        function demodif(l1)
        {
            var l=document.getElementById(l1);
            l.classname=".texteformulaire";
        }

Et je n'obtient aucun résultat, je suis pourtant certain que la fonction est appellée car je peux modifier le contenu du label.

J'avoue que je suis un peu pommé là
Commenter la réponse de sonoboss
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
0
Merci
className de mémoire d'alzheimer. ( oui c'est pénible [le javascript aussi] pour ça )
<hr />                Cordialement       Bul     [mon Site] [    M'écrire]<hr />
Commenter la réponse de cs_bultez
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Hé béééé... Nan ca marche po...

POURQUOI TANT DE HAINE ?

En plus je viens de me rendre compte d'une chose étrange, mon script de validation de formulaire fonctionne sous FF (hormis ce pb de retour au style Css initial) et qu'il ne fonctionne absolument pas sous IE...
Pourtant c'est seulement une suite de
            if(document.FrmCont.nom.value == "")
            {
                alert ('veuillez entrer votre Nom');
                //document.FrmCont.nom.label.style.color='red';
                document.FrmCont.Envoi.disabled=false;document.FrmCont.Envoi.value='Envoyer';
                modif ("lblnom");
                document.FrmCont.nom.focus();
                return false;
            }

J'avoue que le Js me laisse perplexe...

Any Ideas ?
Commenter la réponse de sonoboss
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
B
onsoir...

pour


function demodif(l1)        {
  var l= document.getElementById(l1);
  l.classname = " . texteformulaire";
}
il faut écrire

function demodif(l1)        {

  var l =document.getElementById(l1);

  l.className = "texteformulaire"; // sans le point

}

pour l'autre qu'est ce qui ne marche pas ?







;0)
Commenter la réponse de PetoleTeam
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Merci, mais non ca ne marche toujours pas...
Et dans ma Css, il s'agit d'une classe donc c'est bien ".texteformulaire" mais même sans le "." ca ne marche pas... J'avoue que là je sèche...

Sinon pour IE, ma fonction de verif se présente comme ceci :

        function validation()
        {
               
            var email = document.FrmCont.emailc.value;             if ((email "") || (email.indexOf ('@') -1) || (email.indexOf ('.') == -1))
            {
                alert ('entrez une adresse Email valide');
                document.FrmCont.Envoi.disabled=false;document.FrmCont.Envoi.value='Envoyer';
                modif ("lblemail");
                document.FrmCont.emailc.focus();
                return false;
            } else {
                demodif ("lblemail");
            }
           
            if(document.FrmCont.nom.value == "")
            {
                alert ('veuillez entrer votre Nom');
                //document.FrmCont.nom.label.style.color='red';
                document.FrmCont.Envoi.disabled=false;document.FrmCont.Envoi.value='Envoyer';
                modif ("lblnom");
                document.FrmCont.nom.focus();
                return false;
            }
           
            if(document.FrmCont.pnom.value == "")
            {
                alert ('veuillez entrer votre Prénom');
                document.FrmCont.Envoi.disabled=false;document.FrmCont.Envoi.value='Envoyer';
                modif ("lblpnom");
                document.FrmCont.pnom.focus();
                return false;
            }
           
            if(document.FrmCont.code.value == "")
            {
                alert ('veuillez saisir le Code de Vérification');
                //document.FrmCont.nom.label.style.color='red';
                document.FrmCont.Envoi.disabled=false;document.FrmCont.Envoi.value='Envoyer';
                modif ("lblcode");
                document.FrmCont.code.focus();
                return false;
            }
           
            if(document.FrmCont.comment.value == "")
            {
                if(!confirm ('Etes vous sur de vouloir nous contacter sans nous expliquer pourquoi ?'))
                {
                    document.FrmCont.Envoi.disabled=false;document.FrmCont.Envoi.value='Envoyer';
                    modif ("lblcomment");
                    document.FrmCont.comment.focus();
                    return false;
                }
            }
            document.FrmCont.Envoi.value='Envoi en Cours...';
            return true;
        }

Sur le bouton submit : onClick="this.disabled=true;this.value='Vérification en Cours...'"

La fonction est appellée sur le "onsubmit" du form, mais bizzarement sur IE, mais le bouton reste scotché sur "Validation en Cours"

Mystères et boule de gum...
Commenter la réponse de sonoboss
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Ayé j'ai trouvé pour mon pb de validité pour IE (pb tout couillon en fait) mais je sèche toujours concernant mon Css...
Commenter la réponse de sonoboss
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
J'ai corrigé mon problème en enlevant un événement onclick sur le bouton submit et en incluant le tout sur le onsubmit du form.
Et oui je confirme ton exemple fonctionne mais pour une raison que je ne m'explique pas, ma version ne marche pas chez moi...

Un extrait de ma Css (fichier style.css):
.texteformulaire {
    text-align: justify;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    color:#FFFFFF;
    text-decoration: none;
}
Et ma fonction de modification de style :
function demodif(l1)
{
    var l=document.getElementById(l1);
    l.className='texteformulaire';
}
Et ma fonction est appellée comme présenté 2 posts plus haut.

Une idée ?
Commenter la réponse de sonoboss
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
0
Merci
Personne ?
Commenter la réponse de sonoboss