Dynamische CSS - PHPhulp

Pagina 1

Introductie

Laatst had ik een tutorial gemaakt en daarin bleek dat veel mensen niet weten dat je scripts als CSS kan gebruiken, of scripts als CSS waarden kan gebruiken. (zie http://www.phphulp.nl/php/tutorials/5/647/). Daarom ga ik wat meer in op die punten in deze tutorial.

De tutorial is gemaakt met copy-paste voorbeelden/snippits met enige uitleg.

Pagina 2

dynamisch CSS aanmaken met PHP

Je kan .php documenten als CSS gebruiken. Het voorbeeld hieronder zegt meer dan 1000 woorden, dus... het voorbeeld:

Dit voorbeeld is geschreven in xHTML transitional 1.0

<!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>Titeltje</title>
<link rel="stylesheet" type="text/css" media="screen" href="theme.php?theme=blue" />
</head>
<body>
	hoi allemaal :)
</body>
</html>

Hierin is te zien dat er een PHP document wordt ingevoegt als CSS document. Ben je nu klaar? nee.

Een ander klein detail is dat het PHP document een CSS header moet hebben.
zie voorbeeld

<?php
header('Content-Type: text/css');
$txtcolor = 'red';
?>
body {
color:<?php echo $txtcolor;?>;
}

Als je dit voorbeeld opslaat als 'theme.php' en laat invoegen in het HTML document in het 1e voorbeeld, zal je zien dat 'hoi allemaal :)' rood is.

Belangerijk in het PHP document is "header('Content-Type: text/css');". Zonder deze header wordt het css document niet als CSS herkent en zal het dus geen effect hebben.

Pagina 3

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

<!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>

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.

Pagina 4

extra: CSS document dynamisch verwijderen/invoegen

Om ff lui te zijn, 2 snippertjes om CSS document in te voegen/verwijderen.
Heb niet echt een uitgebreide omschrijving ervan gemaakt; ik neem aan dat ie wel duidelijk is.

Indien je een CSS document wilt invoegen gebruik je de volgende javascript code:
(vervang CSS-DOCUMENT-URL door... 3x raden: de url naar je CSS document)


  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", 'CSS-DOCUMENT-URL')
  document.getElementsByTagName("head")[0].appendChild(fileref)

Indien je een CSS document wilt verwijderen gebruik je de volgende javascript code:
(vervang ID-VAN-CSS-DOCUMENT's-LINK-TAG door het id dat gegeven is aan de tag met het CSS document erin.)


var id = ID-VAN-CSS-DOCUMENT's-LINK-TAG
document.getElementById(id).parentNode.removeChild(document.getElementById(id));