kostenloser Webspace werbefrei: lima-city

CSS class mit js ändern

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

1. Autor dieses Themas

   artics

   artics hat kostenlosen Webspace.

   21:06, 10.2.2014

   Hallo,
   
   Ich bin neu hier und habe erst begonnen Webseiten zu Programmieren.
   Bei meiner Webseite bin ich auf ein Problem gestossen:
   
   Ich suche nach einer Möglichkeit im JS eine CSS class zu ändern.
   z.B.
   
   

   <style type="text/css">
         .test {
           font-weight:bold;
           border:thin solid #000000;
           padding:5px;
           background-color:#DDDDDD;
         }
   </style>

   
   
   möchte padding:5px; auf padding:10px; ändern.
   
   Danke im Vorraus:))
   
   Gruss Artic
   
   Beitrag zuletzt geändert: 10.2.2014 21:07:40 von artics

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. c143

   c143 hat kostenlosen Webspace.

   21:09, 10.2.2014

   Hallo
   Du kannst per

   document.getElementsByClassName('test')

   alle Elemente mit dieser Class in einen Array speichern und dann per for loop jedes einzelne abändern.
   
   Beitrag zuletzt geändert: 10.2.2014 21:10:06 von c143
4. Autor dieses Themas

   artics

   artics hat kostenlosen Webspace.

   21:12, 10.2.2014

   Hallo c143
   
   Danke für deine Blitzschnelle Antwort, dass ging ja razfaz:D!!!
   
   Ich begreife noch nicht ganz wie die loop genau aussehen muss.
   
   Gruss und Dank
   
   artic

5. c143

   c143 hat kostenlosen Webspace.

   21:16, 10.2.2014

   Also du kannst alle Elemente auslesen und in einer Variable speichern.
   
   

   var test = document.getElementsByClassName('test');

   
   Dann bekommst du einen Array zurück, damit kannst du nicht direkt was am CSS ändern. Also machst du eine forschleife, damit kannst du jedes Element einzeln ansprechen. Mehr dazu hier: http://de.selfhtml.org/javascript/sprache/schleifen.htm
   
   

   for (var i=0;i<test.length;i++){
   	test[i].style.margin = '10px';
           test[i].style.padding = '5px';
   }

   
   
   Mit style kannst du dann im CSS ansprechen, was du gerne möchtest. Hoffe das hilft.
   
   Gruss c143 :)
   
   Beitrag zuletzt geändert: 10.2.2014 21:19:54 von c143
6. Autor dieses Themas

   artics

   artics hat kostenlosen Webspace.

   21:23, 10.2.2014

   Achsooo :D
   
   auf das hätte ich eigentlich kommen müssen.
   Aber ist natürlich immer logisch, wenn man dann die Lösung vor sich hat :D.
   
   Vielen Dank nochmals

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?