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 en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Voeg een derde knop toe die de kleur terugzet naar zwart, met style.color = 'black'. Klik eerst op Rood en dan op je nieuwe knop. Wat zie je?
   Antwoord

   De tekst is weer zwart. style.color = 'black' overschrijft de kleur die er stond, of dat nu rood of blauw was.
2. Verander style.color = 'red' bij de knop Rood in style.backgroundColor = 'yellow'. Wat zie je als je op Rood klikt, en daarna op Blauw?
   Antwoord

   Na Rood krijgt de alinea een gele achtergrond en blijft de tekst zwart. Klik je daarna op Blauw, dan wordt de tekst blauw en blijft de achtergrond geel: elke knop verandert alleen zijn eigen eigenschap.
3. Verander 'blue' in 'blauw' en klik op Blauw. Wat gebeurt er, en staat er iets in de console?
   Antwoord

   Er gebeurt niets en de console blijft leeg. blauw is geen CSS-kleur, dus de browser slaat de waarde zonder melding over. Was de tekst al rood, dan blijft hij rood.
4. Schrijf Style.color met een hoofdletter S en klik op Rood. Voorspel eerst: welke soort fout geeft de console?
   Antwoord

   Een TypeError: JavaScript fout: Uncaught TypeError: Cannot set properties of undefined (setting 'color'). Het element heeft geen eigenschap Style, dus Style is undefined: niets, en 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.

Editor laden...

Opdracht 1: Groter

Voeg een knop "Groter" toe die de tekst groter maakt via style.fontSize.

Editor laden...

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.

Editor laden...

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.

Editor laden...

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.