Avatar billede nidu Nybegynder
11. maj 2005 - 14:53 Der er 4 kommentarer og
1 løsning

Ændre CSS class på en knap ved brug af onlick=

Hej.
Er det muligt at ændre class'en som bruges på en knap? Eks. når man klikker på knappen skal den bruge class="button1" i stedet for class="button" (default).
Hvis ikke, er der så en anden måde at ændre baggrunds farven på knappen ved en event?

<style>
.Button { background-color: #0082BF;}
.Button1 { background-color: #BBBBBB;}
</style>
<form name="form">
<button type="button" name="BUTTON_NAME" class="button">BUTTON_TEXT</button>
</form>
Avatar billede carstensuurland Nybegynder
11. maj 2005 - 15:01 #1
<button onclick='doStuff()'>BUTTON_TEXT</button>

function doStuff(){
  if(event.srcElement.className == 'button'){
    event.srcElement.className = 'button1';
  } else {
    event.srcElement.className = 'button';
  }
}
Avatar billede nidu Nybegynder
11. maj 2005 - 15:06 #2
Stærkt! - tak
Avatar billede olebole Juniormester
11. maj 2005 - 15:33 #3
<ole>

- men lad være ... det er en elendig løsning. Det er langt bedre at skifte de enkelte style-properties på elementet - også selvom der er mange. Desuden er det kun én enkelt browser, der forstår syntaksen

/mvh
</bole>
Avatar billede carstensuurland Nybegynder
11. maj 2005 - 16:23 #4
Hmmm... elendig er måske så meget sagt. Det var et svar på et spørgsmål - og jo... det virker også i Firefox :-)
Avatar billede olebole Juniormester
13. maj 2005 - 13:45 #5
Nej, 'elendig' er faktisk en yderst venlig beskrivelse  :)

Det er en kendt sag, at klasse-skift performer ekstremt elendigt. I en bare _lidt_ kompliceret sideopbygning kan det tage flere sekunder at skifte en klasse på et element.
Hvergang du skifter en enkelt CSS-klasse i et dokument, skal browseren genberegne virkningen alle CSS-properties på hvert eneste element på siden - samt alle elementers indbyrdes arveforhold.
Det er komplet spild af brugerens CPU/RAM ... og det er der vel ingen, der har som mål.

Ja, det var et svar på spørgsmålet, men et rigtig dårligt ét. Det gode svar lyder: "Skift de enkelte style-properties"  :)
Ja, det virker også i FireFox ... ligeså elendigt, som det virker i alle andre browsere. Det, at et script virker i FF, er absolut ikke nogen garanti for, det er godt  :)
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