Jump to content

atteindre une class CSS en JS ?

korben080
in Programmation et Lignes de code

Featured Replies

Posted

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 .

  • Quote
    • Author

    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

  • Quote

    je penserais plutot à un truc du genre :

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

    essays sinon avec getElementsByClass....

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

    Edited by Sarvok

  • Quote
    • Author

    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.

  • Quote

    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

  • Quote
    • Author

    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:

  • Quote

    • Archived

    This topic is now archived and is closed to further replies.

    Go to topic listing