Modifier couleur Label For dynamiquement [Résolu]

Signaler
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
-
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007
-
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!

14 réponses

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
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 />
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
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)
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
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
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

Je ne peux que m'incliner devant ce puit de conaissance...

Merci BCP!
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

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!
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
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 />
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

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à
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
className de mémoire d'alzheimer. ( oui c'est pénible [le javascript aussi] pour ça )
<hr />                Cordialement       Bul     [mon Site] [    M'écrire]<hr />
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

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 ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
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)
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

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...
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

Ayé j'ai trouvé pour mon pb de validité pour IE (pb tout couillon en fait) mais je sèche toujours concernant mon Css...
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

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 ?
Messages postés
178
Date d'inscription
lundi 17 juin 2002
Statut
Membre
Dernière intervention
2 octobre 2007

Personne ?