Er is geen CSS ondersteuning.
Het voorbeeld is eenvoudig. Refresh de pagina een paar keer en de border om het plaatje verandert steeds van kleur (als jouw javascript ingeschakeld staat). De procedure valt ook wel mee. De basis van de dynamische stylesheet procedure is het hieronderstaande stukje javascript:
<script>
function csserbij(csscode){
var stijlelement=document.createElement("style");stijlelement.type="text/css";
if(stijlelement.styleSheet){stijlelement.styleSheet.cssText=csscode;}else{
stijlelement.appendChild(document.createTextNode(csscode));}
document.getElementsByTagName("head")[0].appendChild(stijlelement);}
</script>
Even voor alle duidelijkheid; deze procedure dient er alleen maar voor om bij het laden van de pagina een stylesheet te laden die dynamische elementen kan bevatten. Voor het on-the-fly veranderen van css op een pagina zijn er veel eenvoudiger manieren..
De hieronderstaande code doet niets anders dan een random kleurtje aanmaken om die vervolgens (in de dynamische stylesheet) aan de border-kleur van de image te "knopen". De "body{background" heb ik alleen maar toegevoegd om het voorbeeld wat duidelijker te maken. Ik wil laten zien dat je makkelijk css-items kan toevoegen.
<script>
function randomkleur()
{var kleurtje=Math.floor(Math.random()*16777216).toString(16);
return '#000000'.slice(0, -kleurtje.length) + kleurtje;}
csserbij("img{border:3px double "+randomkleur()+"}body{background:#002201}");
</script>
cache 07-09-2010