Partage
  • Partager sur Facebook
  • Partager sur Twitter

Modifier les classes css en JS

Sujet résolu
    24 octobre 2008 à 15:51:57

    <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
    <div id="bloc">
        <h5><a href=<gras>"news1.php"</gras> class="link">Mais oui on va mettre un titre!!</a></h5>
        <div class="corp">			
    	<div class="text_court">
    	      Pour le texte, ça va attendre encore un peu 
    	</div>
    </div>
    </div>
    


    Je voudrai faire un script javascript afin de pouvoir modifier la valeur d'une class : <div class="text_court"> Je veux pouvoir modifier text_court par text_long (qui sont dans mon CSS) en cliquant sur un bouton afin de modifier la taille de mon bloc.

    J'ai fais un essai avec un id="taille" onclick="plus()"
    <script type="text/javascript">
       <!--
    
       function plus(){
       var taille = document.getElementById("taille");
       taille.style.height = "200px";
       }
       function moins(){
       var taille = document.getElementById("taille");
       taille.style.height = "20px";
       }
       //-->
      </script>
    


    mais je ne sais pas comment faire pour que au lieu de modifier la propriété height, je suis mettre:
    -si on clic sur le bouton "+" on a class="text_long"
    -si on click sur le bouton "-" on a class="text_court"


    • Partager sur Facebook
    • Partager sur Twitter
      24 octobre 2008 à 16:09:37

      Tu peux récupérer/modifier la classe d'un élément grâce à l'attribut className.
      • Partager sur Facebook
      • Partager sur Twitter
        24 octobre 2008 à 16:16:09

        Comment tu modifierai mes fonction plus() et moins()?
        document.getElementbyId("????").ClassName = "text_court"
        • Partager sur Facebook
        • Partager sur Twitter
          24 octobre 2008 à 16:33:35

          Tu peux faire une fonction de ce genre :
          function switchClass(button, id){
          	if(document.getElementById(id).className == 'text_long'){
          		document.getElementById(id).className = 'text_court';
          		button.value = '+';
          	}
          	else{
          		document.getElementById(id).className = 'text_long';
          		button.value = '-';
          	}
          }
          


          Et tu n'as plus qu'à l'appliquer ainsi :
          <input type="text" id="test" class="text_court" />
          <input type="button" value="+" onClick="switchClass(this, 'test');" />
          

          • Partager sur Facebook
          • Partager sur Twitter
            24 octobre 2008 à 17:42:29

            Et si le bouton "+" est une image et non un bouton input, le code est le meme? (avec si possible l'image qui change + => - quand on clique dessus)

            function switchClass(img, id){
            	if(document.getElementById(id).className == 'text_long'){
            		document.getElementById(id).className = 'text_court';
            		img.value = '1.png';
            	}
            	else{
            		document.getElementById(id).className = 'text_long';
            		img.value = '2.png';
            	}
            }
            


            img.value ou img.url ... je sais pas du tout!
            <img src="1.png" onClick="switchClass(this, 'test');" />
            
            • Partager sur Facebook
            • Partager sur Twitter
              24 octobre 2008 à 17:47:41

              Dans ce cas, au lieu de modifier la value de l'élément passé grâce à "this", modifie son src. Et pour éviter que les utilisateurs soient perturbés par un bouton où l'on doit cliquer sans avoir de pointeur, mets du CSS sur l'image pour changer le curseur de la souris :
              cursor: pointer;
              
              • Partager sur Facebook
              • Partager sur Twitter
                24 octobre 2008 à 19:51:48

                Merci beaucoup! ça fonctionne...
                En revanche j'ai un petit problème, j'ai donc affecter mes bouton image à plusieurs endroit mais quand je clique dessus il modifie les proprité CSS que sur le premier element et donc ça ne fonctionne pas pour ls autres!

                (en gros sa me permet augmenter ou reduire la taille de mes news mais quand on clique sur le bouton de l'importe quelle news, c'est toujours la news1 qui est agrandi ou retreci!!!=> pour cela il faut mettre des id different a chaque news!)
                • Partager sur Facebook
                • Partager sur Twitter

                Modifier les classes css en JS

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown