De term DHTML wordt op het internet op verschillende manieren omschreven. De opvatting die ik hanteer in deze cursus is:

DHTML = het aanpassen van CSS-eigenschappen van een element op een webpagina met behulp van Javascript.

Voor het leren van DHTML is dus een kennis van volgende onderwerpen onontbeerlijk:

• HTML
• CSS
• Javascript

• CSS-eigenschappen waarvan de naam bestaat uit één woord worden met deze term aangegeven.
• CSS-eigenschappen die bestaan uit meerdere woorden gescheiden door een liggend streepje worden aan elkaar geschreven, waarbij de koppelwoorden een hoofdletter krijgen.

Om de stijleigenschappen van een element te benaderen hebben we opnieuw browserproblemen: niet alle browsers volgen dezelfde manier.

• In de moderne browsers maken we met de methode getElementById van het document een referentie naar het juiste element. Met de eigenschap style kunnen we nu de CSS-eigenschappen van het element manipuleren:

  document.getElementById(elementnaam).style.stijlnaam = stijlwaarde
  

• In vroegere versies van IE konden we werken met document.all:

  document.all[elementnaam].style.stijlnaam = stijlwaarde
  

• Voor oudere versies van Netscape werk je met document.layers, hier gebruik je de eigenschap style niet.

  document.layers[elementnaam].stijlnaam = stijlwaarde
  

Voorbeeld

In de volgende toepassing hebben we een divisie met id vierkant.

Met behulp van twee hyperlinks kan je de achtegrondkleur van deze divisie instellen. De CSS-eigenschap voor de achtergrondkleur is background-color. Willen we deze eigenschap instellen met DHTML dan spreken we de eigenschap backgroundColor aan en passen deze aan.

We zorgen er in de functie kleurVierkant voor dat deze aanpassing cross-browser gebeurt.

<script type="text/javascript">
<!--
function kleurVierkant(kleur){
	if(document.getElementById){
		document.getElementById("vierkant").style.backgroundColor = kleur;
	} else if (document.all) {
		document.all["vierkant"].style.backgroundColor = kleur;
	} else if (document.layers) {
		document.layers["vierkant"].backgroundColor = kleur;
	}
}
-->
</script>
<div id="vierkant" style="width:50px;height:50px;background-color:red"></div>
<p>
<a href="javascript:kleurVierkant('green')">Kleur groen</a> | 
<a href="javascript:kleurVierkant('red')">Kleur rood</a>

Opmerking: voor geneste layers in Netscape 4 is nog wat extra code nodig.

Bovenstaande manier voor het benaderen van CSS-eigenschappen vanuit Javascript is cross-browser. Het zou echter een hele klus worden om voor elke element telkens deze code te hernemen.

Vandaar dat we om de stijleigenschappen van elementen te benaderen de functie getObj uit het hoofdstuk DOM aanpassen. Deze functie staat ons toe de elementeigenschappen te manipuleren via een eigenschap obj van het object dat we met behulp van deze constructorfunctie aanmaken.

We passen deze functie aan zodanig dat we een cross-browser functie bekomen waarmee we via de eigenschap style de stijleigenschappen van het element kunnen manipuleren.

De credits voor deze functie gaan naar quirksmode.

function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}

We kunnen vooraleer we DHTML-acties uitvoeren testen of we DHTML kunnen gebruiken op de pagina door te testen of een van de gebruikte technieken wordt ondersteund, en het resultaat op te slaan in een Boolean variabele:

var DHTML = (document.getElementById || document.all || document.layers);