# CSS en JavaScript

Uiteraard gebruik je al CSS om je pagina's vorm te geven en maak je een onderscheid tussen inhoud (HTML) en presentatie (CSS). Met JavaScript kunnen we onze presentatie dynamisch maken net zoals we onze inhoud dynamisch kunnen maken. De meest directe manier om inline styles te veranderen is via de style eigenschap. Als eerste stap moeten we uiteraard het element uit de DOM bereiken. Daarna kunnen we de style eigenschap aanspreken. Enkele voorbeelden:

myElement.style.color = "#ff0000";
myElement.style.left = "40px";
myElement.style.backgroundRepeat = "repeat-x";

Alle stijlen in CSS zijn bereikbaar via JavaScript. Maar we moeten wel even letten op de schrijfwijze. Een voorbeeld via CSS;

#example {
	width: 300px;
	color: #fff;
	font-weight: bold;
	background-color: #193742;
}

Deze laat zich vertalen in JavaScript als;

myElement.style.width = "300px";
myElement.style.color = "#fff";
myElement.style.fontWeight = "bold";
myElement.style.backgroundColor = "#193742";

Let op de schrijfwijze van de laatste twee regels. Vermits het streepje tussen font en weight in JavaScript als een min-teken kan begrepen worden, wordt het woord dat de stijl aanduidt, geschreven in camelCase. Zo wordt font-weight wordt dan fontWeight.

We kunnen ook elementen een CSS-class toewijzen, of er zelfs één verwijderen. Dit doen we door de eigenschap className te gebruiken. Let wel, je moet steeds de CSS-class aanmaken in je CSS bestand zodat die klaar is voor gebruik.

myElement.className = "someCSSclass";
myElement.className = "";

De tweede regel zal een eventueel aanwezige CSS-class van myElement verwijderen.

# Animatie via JavaScript en CSS

Via de timers uit hoofdstuk 6 (Events) en CSS kunnen we eenvoudige animaties maken met elementen van onze HTML pagina. Bekijk de meegeleverde HTML-code waar we het volgende script op toepassen:

let currentPos = 0;
let intervalHandle;
function beginAnimate() {
	document.getElementById("join").style.position = "absolute";
	document.getElementById("join").style.left = "0px";
	document.getElementById("join").style.top = "100px";
	document.getElementById("join").style.boxShadow = "2px 2px 25px #000";
	// call the animateBox function
	intervalHandle = setInterval(animateBox, 10);
}
function animateBox() {
	// set new position
	currentPos += 1;
	document.getElementById("join").style.left = currentPos + "px";
	//
	if (currentPos > 1200) {
		// clear interval
	}
}
clearInterval(intervalHandle);
// reset custom inline styles
document.getElementById("join").style.position = "";
document.getElementById("join").style.left = "";
document.getElementById("join").style.top = "";
document.getElementById("join").style.boxShadow = "";
window.onload = function() {
	setTimeout(beginAnimate, 1000);
};

In de window.onload functie starten we een timer om 1 seconde te wachten vooraleer de animatie kan beginnen. Deze functie laadt ook de beginAnimate() functie, die alle begininstellingen doet op het gekozen element join. Merk op dat we hier vier extra stijlen toepassen. Tegelijk wordt er een variabele gevuld, die bovenaan als globale variabele werd gedeclareerd, met een setInterval() timer die om de 10 milliseconden de functie animateBox() uitvoerd.

Deze telt 1 pixel bij de currentPos (huidige positie) en voert deze in de .style.left eigenschap van het element join. Het tweede deel van deze functie, het if-statement, zorgt er voor dat er een einde komt aan de animatie als de positie groter wordt dan 1200px. Daarna wordt alles terug gezet zoals het was vòòr dat de animatie begon. Merk vooral op hoe makkelijk het is om animaties te maken via CSS en timers.