Byta CSS-klass med JavaScript

Den här artikeln förklarar hur man kan byta färg eller stil på ett visst objekt. Vi kommer att använda oss av CSS och JavaaScript.

Information

Jag har tänkt att använda CSS-klasser i detta skript, det är lättare så och då blir det mindre kladdigt i koden.
Vi kommer att ändra färgen på en knapp när man pekar på den, trycker ned den och när man släpper den. Självklart behöver det inte vara en knapp, det kan vara nästan vad som helst, som t.ex. en DIV eller en TABELL.

CSS-klasserna

Först och främst måste vi skapa de klasserna vi ska använda:

.btnOver {

   background-color:#CCCCCC;

}



.btnClick {

   background-color:#666666;

}



.btnOut {

   background-color:#FFFFFF;

}

Självklart får du modifiera dem hur du vill, du kan sätta en bakgrundsbild, ramar och mycket mer. Detta är bara ett exempel.

Skapa knappen

Nu ska vi skapa knappen som vi ska leka med. Vi kommer att använda oss av attributen onmouseover, onclick och onmouseout för att detta ska fungera.

<input type="button" name="btn01" id="btn01" value="Klicka här" onmouseover="this.className='btnOver';" onclick="this.className='btnClick';" onmouseout="this.className='btnOut';" />

Det vi gjorde ovan är att vi ändrade namnet på CSS-klassen som ska gälla för knappen vid de olika stadierna. Vi använde this för att säga att det gäller denna knapp och ingen annan.

Ett annat objekt

Men hur gör man ifall man vill att något annat ändras när man klickar på knappen? Jo genom att helt enkelt skriva såhär:

<input type="button" name="btn01" id="btn01" value="Klicka här" onclick="document.getElementById('div01').className='btnOver';" /> 


<div id="div01"></div>

Nu använde vi oss av getElementById('ID på objektet') för att definera vilket objekt vi vill ändra på.

Slutord

Man kan göra mycket med detta, testa dig fram! Lycka till!

Skapades: 2007-08-02 11:52:11
Skribent: Shadi
Lästs 1649 gånger
Betyg: 0 (artikeln har endast 0 röster, det krävs minst 5 för ett betyg)

Kommentarer

Ingen har kommenterat denna artikel än.