Inline stijl
Naast de tekst kun je ook de stijl van een element veranderen. Dat gaat met .style, gevolgd door de CSS-eigenschap:
<button onclick="document.getElementById('tekst').style.color = 'red'">
Rood
</button>
Hetzelfde recept als bij .textContent: element opzoeken, eigenschap een nieuwe waarde geven. Alleen de eigenschap is anders.
CSS-namen worden camelCase
CSS-eigenschappen met een koppelteken schrijf je in JavaScript als camelCase: zonder koppelteken, tweede woord met een hoofdletter.
| CSS | JavaScript |
|---|---|
color | color |
background-color | backgroundColor |
font-size | fontSize |
border-radius | borderRadius |
Predict
Bekijk de startcode in de editor. Beantwoord de vraag voordat je op Run klikt.
De twee knoppen gebruiken allebei hetzelfde id. Wat is er dan anders?
De knoppen doen hetzelfde: ze passen .style.color aan op hetzelfde element. Het enige verschil is de kleurwaarde, 'red' of 'blue'. De tekst zelf blijft staan; alleen de kleur verandert.
Probeer het zelf.
Investigate
Experimenteer in het veld hierboven:
- Voeg een derde knop toe die de kleur terugzet naar zwart:
style.color = 'black' - Probeer
style.backgroundColor = 'yellow'— wat zie je? - Wat gebeurt er als je
style.color = 'blauw'schrijft in plaats van'blue'? Staat er iets in de console?
Voorspel: je schrijft Style.color met een hoofdletter S. Welke soort fout geeft de console?
Een TypeError:
JavaScript fout: Uncaught TypeError: Cannot set properties of undefined (setting 'color')
Het element heeft geen eigenschap Style, dus Style is undefined: niets. Van niets kun je geen kleur instellen. Het lijkt op de null-melding uit de vorige les: daar vond getElementById niets, hier vindt het element de eigenschap niet.
Opdracht 1: Groter
Voeg een knop "Groter" toe die de tekst groter maakt via style.fontSize.
Tip
fontSize wil een waarde met een eenheid, net als in CSS: bijvoorbeeld '2rem'.
Antwoord
<button onclick="document.getElementById('tekst').style.fontSize = '2rem'">
Groter
</button>
Opdracht 2: Twee stijlen in één klik
Maak een knop "Feest" die in één klik de tekst rood maakt én de achtergrond geel. Zet de twee opdrachten achter elkaar in dezelfde onclick, met een puntkomma ertussen.
Tip
Een onclick mag meer dan één regel code bevatten. De puntkomma zegt: hier eindigt de eerste opdracht, nu komt de volgende.
Antwoord
<button onclick="document.getElementById('tekst').style.color = 'red'; document.getElementById('tekst').style.backgroundColor = 'yellow'">
Feest
</button>
De regel wordt lang — in De script-tag leer je hoe je zulke code netjes buiten de HTML zet.
Opdracht 3: Stijl-mixer
Bouw vanaf een lege pagina een "stijl-mixer": een <p> met tekst en vier knoppen — tekstkleur rood, achtergrond geel, letters groter, en één knop die alles terugzet naar de beginwaarden.
Tip
Voor terugzetten: een lege string verwijdert de inline stijl. style.color = '' zet de kleur terug naar wat de CSS bepaalt.
Antwoord
<p id="tekst">Pas mijn stijl aan.</p>
<button onclick="document.getElementById('tekst').style.color = 'red'">Rood</button>
<button onclick="document.getElementById('tekst').style.backgroundColor = 'yellow'">Geel</button>
<button onclick="document.getElementById('tekst').style.fontSize = '2rem'">Groter</button>
<button onclick="document.getElementById('tekst').style.color = ''; document.getElementById('tekst').style.backgroundColor = ''; document.getElementById('tekst').style.fontSize = ''">Herstel</button>
Er gaat iets mis
CSS-naam met koppelteken gebruiken
<!-- Fout: background-color bestaat niet in JavaScript -->
<button onclick="document.getElementById('tekst').style.background-color = 'yellow'">
<!-- Goed: camelCase -->
<button onclick="document.getElementById('tekst').style.backgroundColor = 'yellow'">
In de console zie je:
JavaScript fout: Uncaught SyntaxError: Invalid left-hand side in assignment
JavaScript leest het koppelteken als een min-teken: style.background min color. Aan een min-som kun je niets toekennen, en dat bedoelt de melding. Schrijf CSS-eigenschappen altijd in camelCase als je ze via .style instelt.
Een waarde die CSS niet kent
<button onclick="document.getElementById('tekst').style.color = 'blauw'">Blauw</button>
<button onclick="document.getElementById('tekst').style.fontSize = '30'">Groter</button>
Hier blijft de console leeg, en toch verandert er niets. JavaScript geeft de waarde door aan CSS, en CSS negeert wat het niet kent. 'blauw' is geen kleurnaam ('blue' wel) en bij fontSize hoort een eenheid: '30px'. Een lege console betekent dus niet altijd dat je code klopt.