Dynamisch CSS documenten wijzigen
Met javascript is het mogelijk om dynamisch je HTML pagina aan te passen. Meeste denken dat je alleen de <body> kunt aanpassen... maar je kan ook de <head> aanpassen. Zo kun je dus, net als normale HTML tags, ook tags die CSS invoegen wijzigen, verwijderen en invoegen.
CSS wijzigen
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Groepsreizen Europa</title>
<link rel="stylesheet" type="text/css" id="maincssfile" media="screen" href="cssdocument1.css" />
</head>
<body onload="">
hallo allemaal :)<br/><button onclick="document.getElementById('maincssfile').href='cssdocument2.css';">laadt CSS document</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Groepsreizen Europa</title>
<link rel="stylesheet" type="text/css" id="maincssfile" media="screen" href="cssdocument1.css" />
</head>
<body onload="">
hallo allemaal :)<br/><button onclick="document.getElementById('maincssfile').href='cssdocument2.css';">laadt CSS document</button>
</body>
</html>
Bij het klikken op het knopje 'laadt CSS document' zal "document.getElementById('maincssfile').href='cssdocument2.css';" uitgevoert worden.
document.getElementById('maincssfile') -> acces het element met ID = maincssfile. In dit geval de <link> tag die het CSS document invoegt.
document.getElementById('maincssfile').href= -> verander datgene dat tussen href=" en " staat. Achter href= vul je dus het te laden document in.
« vorige pagina | volgende pagina »
Inhoudsopgave
- Introductie
- dynamisch CSS aanmaken met PHP
- Dynamisch CSS documenten wijzigen
- extra: CSS document dynamisch verwijderen/invoegen