Font sizer example - Javascript

Betreft: Javascript, CSS, lettergrootte

A.E.Veltstra
8 maart 2003

Probleem:
Stel dat je de bezoekers van je website in staat wilt stellen om de grootte van de letters aan te passen, omdat 's werelds wijdstverspreide webbrowser dat zelf niet kan. Dan kun je de techniek gebruiken die in deze pagina opgenomen is.

Maak de letters kleiner.

Maak de letters groter.

Waarom werkt dit?
Omdat in de stylesheet zjr.css, het hart van alle stijlen van onze website, de lettergrootten op twee manieren zijn opgenomen:

1. In de body-klasse is de lettergrootte ingesteld op 11 punten;
2. In alle andere klassen zijn de lettergrootten ingesteld als percentage.

Omdat alle andere klassen binnen de body-klasse vallen, wordt hun lettergrootte berekend als percentage van 11pt. De scripts op deze pagina veranderen de lettergrootte van de body-klasse. De rest verandert automatisch mee.

De gebruikte code:

<script type="text/javascript">
function InitFont() {
	document.getElementById("myBody").style.fontSize = '11pt';
}
function smaller() {
	var p = parseInt(document.getElementById("myBody").style.fontSize);
	p -= 2;
	document.getElementById("myBody").style.fontSize = p.toString() + 'pt';
}
function larger() {
	var p = parseInt(document.getElementById("myBody").style.fontSize);
	p += 2;
	document.getElementById("myBody").style.fontSize = p.toString() + 'pt';
}
</script>