Aller au contenu

atteindre une class CSS en JS ?

Par korben080
dans Programmation et Lignes de code

Featured Replies

Posté(e)

Bonjour,

Je suis pourtant déjà allé assez loin dans le Javascript et le CSS combinés (bien sur pas au bout je n'aurais cette pretention et en plus je en serais pas la a poser des questions mais seulement à y répondre ) mais je n'ai jamais vu comment on pouvait atteindre une classe de style dans un script javascript.

exemple:

<style>.maClass{color:red;}</style>
<html>
     <P class="maClass">blabla</P>
     <P class="maClass">blabla</P>
     <P class="maClass">blabla</P>
     <input type="button" onclik="changeColor()" />
</html>

Et donc par un javascript j'aimerai changer la couleur de l'ensemble des élément appartement à la class "maClass"

UN TRUC DE CE GENRE existe t-il ??:

<script>
     function changeColor()
     {
                   document.all.classCSS["maClass"].color="blue";
      }
</script>

Bon j'espere avoir été assez clair c'est pas toujours évident.

Aller je file manger a plus tard .

  • Citer
    • Posté(e)
    • Auteur

    OK personne ne veut m'aider :-D !!

    Non c'est pas grave bien sur et de plus j'ai trouvé. Enfin j'ai contourné le problème par ce que je ne crois pas qu'il y ait de réelle solutions a ce problème.

    Sinon en faite je recupère grace à la commance getElementByTagName le tableau contenant les tag que je veux modifier et à ces dernieres je leur ai ajouter une valeur spécifique pour "id" donc je teste dans le parcourt de ma collection si l 'id est bien ce lui qu je cherche et si oui je modifie les styles,....

    Bref vs avez rien compris c'est pas grave voici le code: 

    
for(var i=0;i<document.getElementsByTagName("td").length;i++)
{
   if(document.getElementsByTagName("td")[i].id=="entetes")
   {
     document.getElementsByTagName("td")[i].style.backgroundColor = "#000000";
                               }
{

    et si vs avez besoins d'autres expliquation aussi l'impides que celles-ci faites moi le savoir.

    Bye all

  • Citer
    • Posté(e)

    je penserais plutot à un truc du genre :

    document.getElementsByTag[].SetAttribute('color', '#0000FF')

    essays sinon avec getElementsByClass....

    (chui arrivé 30sec trop tard :-D )

    Modifié par Sarvok

  • Citer
    • Posté(e)
    • Auteur

    Ok merci bien !

    Je vais aller m'essayer le "getElementsByClass" pr ma culture G parce que mon truc meme si c'est de la bidouille tient la routemas ne sait jamais pour plus tard.

    Aller bye et merci.

  • Citer
    • Posté(e)

    Euh par contre, je suis pas sur du tag [MdR s'il marche pas , ca s'trouve tu t'es fait chier pendant super longtemps pour rien .... MdR]

    Bref, bonne cahnce quand meme

  • Citer
    • Posté(e)
    • Auteur

    RE !!!

    Pas de problème pr le

    document.getElementsByTag[]

    car je n'ai pas essayé.

    par contre le "getElementsByClass" c'a na pas l'air d'exister. Du moins je suis aller voir chez la W3C et selfhtml ils ne connaissent pas. Par contre j'ai découvers cette petite balise que je ne connaissais pas : "className" tres pratique en faite elle me permit ainsi de me créer ma propore "getElementsByClass" que voici avec un exemple d'utilisation (certe un peu bateau,...) :

    
<head>
   <style type="text/css">
     .pair{height:10px;color:red;}
     .impair{height:15px;color:blue;}
   </style>
   <script language="JavaScript" type="text/javascript">
   function getElementsByClass(maClass) {  
      var tabRetour = new Array(); 
     var tabTmp = new Array();
     tabTmp = document.getElementsByTagName("*");
     j=0;
     	for (i=0; i<tabTmp.length; i++) {  
         	if (tabTmp[i].className==maClass) {  
           	tabRetour[j]=tabTmp[i]; 
       	j++;
         	}  
       } 
      return tabRetour;
   } 
   function changer(){
     for(var i=0;i<getElementsByClass("pair").length;i++){
       getElementsByClass("pair")[i].style.color="green";	
   	}
   }
   </script>
</head>
<body>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <input type="button" value="click" onclick="changer()" />
</body>

    Et voilou c 'est tout Juli !! :keskidit:

    aller bye :reflechis:

  • Citer

    • Archivé

    Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

    Aller sur la liste des sujets