Ben's Hobbyhoekje -- Tekstkleur veranderen II: aanpak met CSS

Tekstkleur veranderen II: aanpak met CSS

Hieronder zie je zes knoppen. Als je die indrukt verandert de kleur van de tekst. Dat geldt voor de hele <body> van het document. De kleur van de alinea-koppen, de hyperlinks en de klein gedrukte tekst verandert echter niet.
Het effect beperkt zich tot het actieve venster of frame.

De tekstkleur van de gehele <body> is ingesteld met CSS. Op deze bladzijde staat beschreven hoe je de kleur van de tekst door JavaScript kunt laten veranderen. De code staat onderaan de bladzijde.

Er worden twee items besproken:
1. Het JavaScript om de tekstkleur te veranderen.
2. Beperkingen bij het gebruik van dit script.
De tekstkleur verander je door aan de eigenschap document.body.style.color een nieuwe waarde toe te kennen. Zo zorgt de JavaScript opdracht:
document.body.style.color = '#ff0000';
er voor dat de tekstkleur knalrood wordt.
Op deze plaats is dat geregeld in een JavaScript function tekstkleur(), die in de <head> staat. Deze functie heeft een parameter, code, die de gewenste kleur bevat. De function wordt aangeroepen als je op een van de knoppen hierboven drukt.
De knoppen gebruiken de event-handler onClick om de function tekstkleur aan te roepen.
Het is noodzakelijk dat je color hebt ingesteld in een style. Het maakt hierbij niet uit of de instelling is gemaakt in een <style>-tag of in een Style-sheet (file.css) die met een <LINK>-tag in de HTML-code is opgenomen.
Het attribuut text= in de <body>-tag werkt niet omdat CSS voorrang heeft boven attributen in tags.
Als je de tekstkleur niet instelt in CSS maar alleen met text= in de <body>-tag, moet je andere code in de JavaScript-function tekstkleur() gebruiken. Zie daarvoor het item Tekstkleur veranderen.
Als je de tekstkleur verandert (met een van de knoppen), verandert de kleur van de kopjes bovenaan elke paragraaf niet mee. Van deze zaken is de kleur in een <style>-class vastgelegd. Die hebben hogere prioriteit dan de style van hele tags zoals <BODY> en <P>.
Deze aanpak heeft nauwelijks beperkingen. Wel zijn er valkuilen die er voor zorgen dat het nèt niet is wat je wilt hebben. Een paar voorbeelden:
- Herdefinities van de opmaak binnen een blok. Op deze pagina wordt de tekstkleur van de hele body veranderd, behalve de kopjes. Dat komt doordat die class="Kop3" hebben, waarin de kleur vastligt. Dat wordt niet aangepast.
- Het zelfde gebeurt met id's waarin kleur wordt vastgelegd.
- Als je voor body en p aparte style-blocks hebt gemaakt, werkt de opdracht:
  document.body.style.color = ...
  alleen voor zaken die buiten <p> ... </p>-tags staan. Binnen de p-tags blijft de CSS-definitie van de p-tag gelden.
- Het zelfde gebeurt als je body en p in één keer definieert in CSS, dus met body,p { ..... }.
  Alles binnen de body behalve binnen p (en eventuele andere classes en id's die kleur definiëren) verandert van kleur.
- Dit probleem is te omzeilen door elk item waarvan je de tekstkleur wilt veranderen een uniek id-attribuut te geven. Het JavaScript dat de wijzigingen doorvoert moet dan elk id apart aanpassen.
  De id's moeten uniek zijn omdat anders alleen de code met eerste id wordt aangepast.
  Dit heeft overigens het voordeel dat je elke paragraaf, lijst, enz. apart van kleur kunt laten veranderen.
- De JavaScript-code om de kleuren van een enkel id aan te passen luidt:
  document.getElementById('naam_van_het_id').style.color = ...

De code ziet er als volgt uit:

(Zet dit JavaScript in de <HEAD>)

<script>
function tekstkleur(code) {
document.body.style.color=code;
}
</script>

Een toepassing: knipperende tekst.

Hieronder zie je een knop. Als je die indrukt verschijnt er een venster met wat tekst. Als je op de tekst in dat venster klikt begint de tekst te knipperen. Je zou dit kunnen gebruiken voor het geven van een waarschuwing.

De truc die hier wordt uitgehaald is om -zodra de tekst wordt aangeklikt- een function te starten die de tekstkleur en de achtergrondkleur gelijk maken. Het lijkt nu of de tekst verdwijnt. Een seconde later wordt de tekstkleur zwart gemaakt. Weer een seconde later worden de tekstkleur en de achtergrondkleur weer gelijk gemaakt, enz.

Opmerking:

Een beschrijving van het maken van knoppen is te vinden in het item "Knop met tekst of een plaatje". Er is hier gebruik gemaakt van <button>-tags.
De kleur van de button-tekst is ingesteld met behulp van een class in een <STYLE>.

Kies de tekstkleur zodanig dat er een goed contrast is met de achtergrond. Let vooral goed op het contrast als de achtergrond een plaatje is.
Een beschrijving van kleuren in HTML vind je in het item "Kleurcodes voor tekst, links en achtergrond".

Zie ook de items "Over kleurgebruik op je website", "Achtergrondkleur veranderen II: aanpak met CSS" en "Achtergrondplaatje veranderen II: aanpak met CSS".