Stil mit {stil}

Apr 2008

DOM Level 2 Style Sheets Beispiel

Immer noch basteln wir kleine GIF-Bilder mit Kofferecken, um aus eckigen HTML-Boxen weiche Rundungen vorzuspiegeln. Es ist vielleicht ein Mißbrauch des CANVAS-Elements, wenn es als Hintergrundbild für DIV-Elemente dienen muss, aber ein interessantes Projekt ist es allemal.

Die Darstellung ist gracefully degrading – in Internet Explorer, wo das CANVAS-Element nicht implementiert ist, wird das DIV-Element einfach ein viereckiger Kasten.

Das Script nimmt DIV-Element mit class="canvas" und hinterlegt sie mit einem CANVAS-Element, das mit einem Bezierpfad umrandet ist. Damit das CANVAS-Element dieselbe Größe, Hintergrundfarbe und Rahmenbreite- und -farbe aufweist wie das DIV-Element, liest das Skript das Stylesheet aus.

Die aktuellen CSS-Eigenschaften für das DIV-Element können nicht mit elem.style.rule ausgelesen werden, da in den Inline-Regeln die aktuelle Höhe eines flexiblen Elements nur fest und starr angegeben werden könnte. Stattdessen wird das DIV-Element in einem Stylesheet deklariert, das mittels <style>- oder <link>-Tag im Head des Dokuments eingebunden ist.

div.canvas { background: lavender; 
             border: 5px solid darkslateblue; 
             width: 260px; 
             padding: 9px; }

Das Skript liest die Dimensionen, Hintergrundfarbe und Farbe des Rahmens des DIV-Elements und benutzt sie, um ein Canvas-Element mit den selben Eigenschaften zu erzeugen. Der einzige Unterschied zwischen dem angezeigten CANVAS-Element und dem DIV-Element sind die runden Ecken – die Kofferecken –, die durch einen Pfad in das CANVAS gezeichnet werden.

So kann das Canvas-Element immer dieselbe Größe und Farbe wie das DIV-Element aufweisen. Browser, die das Canvas-Element nicht implementieren, zeigen das originale DIV-Element an.

// jetzt die Stile des DIV-Elements lesen und
// daraus die Stile für das CANVAS bauen
var style = window.getComputedStyle(cDiv, null);   
var canvasW = style.getPropertyValue("width");    
var canvasH = style.getPropertyValue("height");
var pT = style.getPropertyValue('padding-top');
var pR = style.getPropertyValue('padding-right');
var pB = style.getPropertyValue('padding-bottom');
var pL = style.getPropertyValue('padding-left');
var bb = parseInt(style.getPropertyValue('border-top-width'));

// Farben des Rahmens um das DIV und Hintergrundfarbe des DIVs 
// in rgba mit Transparenzwert 1 umwandeln
var bc = style.getPropertyValue('border-top-color');   
bc = bc.replace(/rgb/, 'rgba');                        
bc = bc.replace(/\)/, ',1)');                          
var bgc = style.getPropertyValue('background-color');
bgc = bgc.replace(/rgb/, 'rgba');
bgc = bgc.replace(/\)/, ',1)');

var style = window.getComputedStyle(cDiv, null);

liest die aktuellen Eigenschaften des DIV-Elements. Die einzelnen Eigenschaften werden mit

var pT = style.getPropertyValue('padding-top');

gelesen, so wie hier die Eigenschaft padding-top.

Script