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

Achtergrondkleur veranderen II: aanpak met CSS

Hieronder zie je vijf knoppen. Als je die indrukt verandert de kleur van de achtergrond. De kleur van de tekst verandert niet.
Het effect beperkt zich tot het actieve venster of frame.

Hier staat beschreven hoe je de kleur van de achtergrond door JavaScript kunt laten veranderen. De code staat onderaan de bladzijde.

Er worden twee items besproken:
1. Het JavaScript om de achtergrondkleur te veranderen.
2. Beperkingen bij het gebruik van dit script.
De achtergrondkleur verander je door een nieuwe waarde toe te kennen aan de eigenschap document.body.style.backgroundColor. Zo zorgt de JavaScript opdracht:
document.body.style.backgroundColor = '#ff0000';
er voor dat de achtergrondkleur knalrood wordt.
Op deze plaats is dat geregeld in een JavaScript function achtergrondkleur(), 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 achtergrondkleur aan te roepen.
Het is noodzakelijk dat je background-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 bgcolor= 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 bgcolor= in de <body>-tag, moet je andere code in de JavaScript-function achtergrondkleur() gebruiken. Zie daarvoor het item Achtergrondkleur veranderen.
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 achtergrondkleur van de hele body veranderd. Als bijvoorbeeld voor paragrafen <P> ... </P> een eigen background-color in de style is opgenomen, verandert die kleur dus niet mee!
- Het zelfde gebeurt met id's waarin kleur wordt vastgelegd.
- 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.
Je kunt op deze manier de achtergrondkleur van elk item veranderen. Geef daarvoor elk item een uniek id-attribuut. 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.backgroundColor = ...

De code ziet er als volgt uit:

(Zet dit JavaScript in de <HEAD>)

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

Een toepassing: knipperende achtergrond.

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

De aanpak is om -zodra de tekst wordt aangeklikt- een function te starten die de huidige achtergrondkleur bewaart en zelf een function aanroept om de achtergrondkleur te veranderen in rood. Na een wachttijd van 0,1 seconde wordt de oorspronkelijke achtergrondkleur hersteld. Vervolgens wordt na weer 0,1 seconde de achtergrondkleur weer rood gemaakt, enz.
Dit wordt een paar keer herhaald.

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 achtergrondkleur zodanig dat er een goed contrast is met de tekst.
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", "Tekstkleur veranderen II: aanpak met CSS" en "Achtergrondplaatje veranderen II: aanpak met CSS".