Avatar billede o-zone Nybegynder
27. marts 2006 - 13:35 Der er 6 kommentarer og
1 løsning

ny class på element via javascript

Hej med jer...

Kan jeg via javascript lade et element få en ny class attribut?
Altså istedet for at lade javascript ændre de enkelte CSS atributter een ad gangen, så bare lade elementet pege på en anden class.

I forsimplet form havde jeg håbet på noget i stil med nedenstående (men det virker så altså bare ikke):
---8<------
<html>
  <head>
    <style>
    #myDiv{
        width:300px;
        height:200px;
    }
    .itsOn{
        background-color:#ff3333;
        color:black;
    }
    .itsOff{
        background-color:#330000;
        color:white;
    }
    </style>
    <script language="">
    function turnElementOn(elem){
        elem.class="itsOn";
    }

    function turnElementOff(elem){
        elem.class="itsOff";
    }
    </script>
  </head>
  <body>
    <div id="myDiv" class="itsOff" onmouseover="turnElementOn(this); return true;" onmouseout="turnElementOff(this); return true;">Her er en kasse!</div>
  </body>

</html>
---8<------

... den gider ikke æde elem.class="yadayadayada", men er der så en anden måde man kan få fat i (og ændre) class?

/O-zone
Avatar billede ldanielsen Nybegynder
27. marts 2006 - 13:43 #1
elem.className= "yadayadayada";

- tror jeg nok :o)
Avatar billede o-zone Nybegynder
27. marts 2006 - 13:45 #2
jeg fandt den også lige selv :) ... men svaret er jo godt nok, og du kom først - så skriv et svar, så får du points! :-D
Avatar billede ldanielsen Nybegynder
27. marts 2006 - 14:00 #3
Tak :o)
Avatar billede mclemens Nybegynder
27. marts 2006 - 14:25 #4
p.s. det er vist ikke godt at skifte
class i dokumenter læs evt. denne:
http://www.eksperten.dk/spm/696880
Avatar billede o-zone Nybegynder
27. marts 2006 - 16:09 #5
Jeg synes at det lyder meget underligt, hvis hele DOMen skal genberegnes fordi man ændrer en class, men at den ikke bliver genberegnet hvis man nøjes med at ændre de eksakte properties ved class'en???

De enkelte properties skal vel også nedarves???
Men ok - det er jo før set, at ting har været sært implementeret. :)

Gevinsten (og den synes jeg absolut er stor!) ved ikke at lade javascriptet ændre de enkelte properties, men istedet få elementet til at pege på en anden class er, at jeg kan holde ALT omkring layout i mit stylesheet (hvor det hører hjemme!!), istedet for at et redesign i CSS også skal involvere ændringer i mit javascript!
Avatar billede mclemens Nybegynder
27. marts 2006 - 16:19 #6
Gevinsten (og den synes jeg absolut er stor!) ved ikke at lade javascriptet...>
Enig - jeg vidste ikke det andet og derfor kom jeg med den anden løsning (med class skifte) først i den tråd, tvivler dog på at roenving siger noget forkert... det var bare et hint til tråden intet andet :)
Avatar billede roenving Novice
29. marts 2006 - 07:33 #7
Noget af forklaringen på, at der er forskel på at skifte enkelte properties og className mht. genopbygning af DOM-træet er, at en af de mekanismer, der bruges ved beregningen af dette, medtager en prioritering på baggrund af, hvr mange elementer en selektor består af ...

-- f.eks. har '#mitElement td a' større prioritet end '#mitElement a', hvorfor man kan have links (i eksemplet her) i tabelceller, der har et andet udseende end dem, der ikke ligger inde i tabelceller ...

-- hvordan hele det prioriteringsskema skal ændres kan bare ved ændring af eet className være fuldstændigt uoverskueligt, hvorfor browseren simpelthen genberegner !-)

-- ved ændring af en property skal det jo kun implementeres i det aktuelle element og eventuelle underelementer, der skal cascades over !o]
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester