Javascript kan in principe alle html en css beïnvloeden binnen een document. Toch heeft het als nadeel dat je website technisch onleesbaar kan worden als je teveel aanpast met Javascript. Dat kan voor frustraties zorgen als je bijvoorbeeld met iemand anders samenwerkt aan een site of als je na lange tijd aanpassingen moet doen.
Een goede oplossing hiervoor is om css classes van html elementen toe te voegen of te verwijderen. Op die manier zijn de verschillende css opmaak instellingen goed zichtbaar omdat ze allemaal als classes in het css document terug zijn te vinden. Het enige wat Javascript doet is een css class weghalen of toevoegen aan een element. Je zult zien dat dat direct gevolgen heeft voor het uiterlijk van het html element. Als voorbeeld maken we een vierkante knop die rond wordt als erop geklikt wordt.
Stap 1. Start met een nieuw html document, met daarin een a-tag. Deze tag willen we later aanpassen met Javascript, daarom geven we alvast een id.
<body>
<a id=”knop” href=”#”> </a>
</body>
Vervolgens beschrijven we met css het uiterlijk van ‘knop’.
<style>
a#knop
{
width:100px;
height:100px;
display:block;
background-color:#000;
border:#FFF 2px dashed;
box-shadow:#000 0px 0px 0px 4px;
}
</style>
Stap 2. We hebben nu een vierkante knop. We willen dat die knop rond wordt als erop geklikt wordt. Het eerste wat we doen is het aangepaste uiterlijk beschrijven in een nieuwe class:
<style>
a#knop
{
width:100px;
height:100px;
display:block;
background-color:#000;
border:#FFF 2px dashed;
box-shadow:#000 0px 0px 0px 4px;
}
.rond
{
border-radius:50%;
}
</style>
Stap 3. De class waarin beschreven staat dat de knop rond moet zijn bestaat nu, maar heeft nog geen invloed omdat de class nog niet gekoppeld is aan de knop. Dat gaan we doen met Javascript. Om te beginnen moet de knop een Javascript functie uitvoeren als erop geklikt wordt. We noemen die functie ‘verandClass()’. Omdat Javascript die functie niet kent moeten we die zelf maken. Dat doen we binnen de script-tag.
<a id=”knop” href=”#” onclick=”veranderClass()”> </a>
<script type=”text/javascript”>
function veranderClass()
{
}
</script>
Stap 4. Als de knop aangeklikt wordt, moet javascript een class bijschrijven in de html code, om precies te zijn in de a-tag met de id ‘knop’. Daarvoor moet Javascript eerst in het html document op zoek naar een tag met de id ‘knop’. Het is niet handig als Javascript bij iedere aanpassing opnieuw moet gaan zoeken. Daarom gebruiken we een variabel met de naam ‘knop’. Die symbool staat voor een html-tag met de id ‘knop’.
<script type=”text/javascript”>
var knop=document.getElementById(“knop”);
function veranderClass()
{
}
</script>
Vervolgens kunnen we in de functie ‘veranderClass’ de opdracht geven de class ‘rond’ toe te voegen aan ‘knop’.
<script type=”text/javascript”>
var knop=document.getElementById(“knop”);
function veranderClass()
{
knop.className=”rond”;
}
</script>
We hebben nu een heel eenvoudig voorbeeld wat met 1 keer klikken werkt. Het blijft een simpele knop, maar het voorbeeld wordt net iets mooier als we kunnen wisselen tussen rond en vierkant. Als laatste stap gaan we de functie ‘veranderClass’ uitbreiden door Javascript te laten kiezen: Als de knop geen class ‘rond’ heeft wordt de class ‘rond’ toegevoegd. Als de knop wel een class ‘rond’ heeft wordt de class ‘rond’ verwijderd (en wordt de knop vierkant).
<script type=”text/javascript”>
var knop=document.getElementById(“knop”);
function veranderClass()
{
if(knop.className==”rond”)
{
knop.className=””;
}
else
{
knop.className=”rond”;
}
}
</script>