Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Neue Kameras und Objektive | Bildgestaltung und Bildbearbeitung
Fotografie von ihrer besten Seite: foto.5lux.de
Nov 2007
DOM Level 2 Style Sheets
Die Eigenschaften und Methoden des DOM Style Sheets operieren auf den Style Sheets des Dokuments, die durch das die durch ein <style>- oder <link rel="stylesheet">-Tag in der Seite eingebunden sind, z.B.
Ein Style Sheet wird nur auf das Dokument angewendet, wenn die media-Definition vorhanden ist und disabled = false ist.
<link rel="stylesheet" href="style.css" type="text/css" title="Standard" media="screen, projection" />
<style type="text/css">
@media print { p { font-size: 9pt; line-height: 120%; } }
</style>
<!--[if IE]>
<link rel="stylesheet" href="styleIE.css" type="text/css" media="screen" />
<![endif]-->
styleSheets
ist ein Array mit styleSheets-Objekten, die alle geladenen internen und externen Style Sheet-Vereinbarungen des Dokuments darstellen.
var sheets = document.styleSheets;
Der einfachste Weg, zu prüfen ob ein Browser DOM Style Sheets unterstützt, ist die Abfrage
if (document.styleSheets) {
…
}
Der Zugriff auf die Elemente des Arrays erfolgt nur über den Index des Elements im Array. sheets[0] ist dementsprechend das erste Style Sheet im Dokument, das durch ein LINK- oder STYLE-Element eingebunden ist und sheets.length gibt die Anzahl der Style Sheets des Dokuments zurück.
Die Eigenschaften des Style Sheets-Objekts (type, disabled, title, media, href, ownerDocument, parentStyleSheet) geben Zugriff auf weitere Informationen zum jeweiligen Style Sheets-Objekt. Bis auf disabled können alle Eigenschaften nur gelesen werden.
Der Zugriff auf die geladenen Style Sheets eine Dokuments kann ebenso durch die DOM Core-Methoden document.getElementsByTagName('style') und document.getElementsByTagName('link') erfolgen. Dann können die Attribute title, href, media, ... durch setAttribte() geändert werden.
var firstSheet = document.getElementsByTagName('style')[0].sheet;
var owner = document.styleSheets[0].ownerNode;
Unterstützt von Firefox, IE 6, Opera 9, Safari 1.3+.
type
gibt den Typ des aktuellen Style Sheets an – äquivalent zum type-Attribut des <link>- oder <style>-Tags.
Die Funktion showType() sammelt in der ersten Anweisung alle Style Sheets des Dokuments im Array sheets und gibt die type-Eigenschaft des ersten Array-Elements mit alert(sheets[0].type); aus.
function showType()
{
var sheets = document.styleSheets;
alert(sheets[0].type);
}
Unterstützt von Firefox, IE 6, Opera 9, Safari 1.3+.
disabled
disabled ist ein boole'scher Wert und gibt an, ob ein Style Sheet in Kraft ist (disabled = false) oder nicht. Default ist false. Ein Style Sheet wird nur auf das Dokument angewendet, wenn die media-Definition vorhanden ist und disabled den Wert false aufweist. Die Eigenschaft disabled wird z.B. verwendet, um alternative Style Sheets in Browsern, die alternative Style Sheets nicht nativ unterstüten, ein- und auszuschalten.
<link rel="stylesheet" href="xxStyleExtra.css" type="text/css" media="screen" />
Dieses letzte Style Sheet dieser Seite enthält die Regel:
.post h4 { color: fuchsia; border-bottom: 4px solid fuchsia; }
Die erste Anweisung der Funktion showDisabled() sammelt alle Style Sheets im Array sheets. Die Anweisung sheets[1].disabled = true; setzt das letzte Style Sheet dieses Dokuments außer Kraft.
function showDisabled()
{
var sheets = document.styleSheets;
var last = (sheets.length-1);
sheets[last].disabled = true;
}
Safari 1 und 2 und Konquerer können die Eigenschaft disabled nur lesen, nicht aber ändern. Dementsprechend sind die Überschriften auf dieser Seite weiterhin in fuchsia unterstrichen.
Unterstützt von Firefox, IE 6, Opera 9, Safari 3
ownerNode
gibt einen Verweis auf den Knoten zurück, der das aktuelle Style Sheet enthält. Gibt in regulären HTML-Seiten i.d.R. ein LINK- oder STYLE-Element zurück. In XML-Dokumenten kann dies die linkende ProcessingInstruction sein.
ownerNode ist in IE nicht implementiert und der Aufruf sheets[0].ownerNode.nodeName würde zur Fehlermeldung "OwnerNode.nodeName" ist Null oder kein Objekt führen. Darum normalisiert die zweite Anweisung den Wert des Knotennamens (lesen als: Wenn sheets[0].ownerNode existiert, setze die Variable owner auf den Wert sheets[0].ownerNode.nodeName und sonst auf das proprietäre sheets[0].owningElement.NodeName).
function showOwner()
{
var sheets = document.styleSheets;
var owner = sheets[0].ownerNode ?
sheets[0].ownerNode.nodeName : sheets[0].owningElement.NodeName;
alert(owner);
}
Unterstützt von Firefox, Opera 9, Safari.
parentStyleSheet
Verweis auf das Top-Level-Stylesheet bei Style Sheets, die durch die @page-Regel eingebunden sind. Bei Style Sheets, die durch LINK- oder STYLE eingebunden sind, wird null zurückgegeben.
href
gibt die URL eines externen Style Sheets als String zurück.
Firefox gibt als href bei internen Style Sheets die URI dieser Seite zurück, Safari gibt null zurück, Internet Explorer gibt einen leeren String zurück.
title
<link rel="stylesheet" href="style.css" type="text/css" title="Standard" media="screen, projection" />
function showTitle()
{
var sheets = document.styleSheets;
alert(sheets[i].title)
}
Safari interpretiert styles[i].title nicht und gibt null zurück.
media
Gibt das media-Objekt des Style Sheets zurück. Die Eigenschaft mediaText gibt den Medientyp als String zurück. Default ist screen.Wenn das media-Attribut nicht gesetzt ist, geben Firefox und Safari einen leeren String zurück.
Für IE 6 ist styles[i].media ein literaler String, der den Wert des media-Attributs enthält. Darum normalisiert die zweite Anweisung den Text der Medienliste
var media = (typeof(sheets[i].media) == 'object') ?
sheets[i].media.mediaText : sheets[i].media;
Zu lesen: Wenn sheets[i].media vom Typ 'object' ist (das ist bei allen standardkonformen Browsern der Fall), weise der Variablen media den Wert der Eigenschaft mediaText zu (sheets[i].media.mediaText) und sonst sheets[i].media (für IE 6).
function showMedia()
{
var sheets = document.styleSheets;
var media = (typeof(sheets[i].media) == 'object') ?
sheets[i].media.mediaText : sheets[i].media;
alert(media);
}
Obwohl es zurzeit kaum Anwendungen geben wird, die Gebrauch davon machen und es allem Anschein nach von keinem Browser unterstützt wird: media ist ein Array, durch das iteriert werden kann:
for (var i=0; i<document.styleSheets[0].media.length; i++ ) {
alert(document.sheets[0].media.item[i]);
}
Das media-Objekt stellt die Methode appendMedium zur Verfügung, um Medientypen hinzuzufügen und deleteMedium, um Medientypen zu löschen. Zurzeit dürften diese Methoden nur in Opera eine sinnvolle Anwendung finden, da nur Opera weitere Medientypen neben screen und print unterstützt (projection, handheld, …).
document.styleSheets[0].media.appendMedium('projection');
Hinter den Kulissen
Der Grund für die geringe Akzeptanz des Style Sheet-Objekts liegt in der immer noch unzuverlässigen Unterstützung: Nur FireFox und Opera ab Version 9 bieten ein funktionierendes Style Sheet-Objekt, Internet Explorer 6 beherrscht zwar eine recht breite Basis von Style Sheet-Eigenschaften und Methoden, allerdings sind dies häufig proprietäre Funktionen. Safari und Konquerer bieten nur einen stark eingeschränkten Zugriff auf das Style Sheet-Objekt. Dummerweise geben sowohl Safari als auch Konquerer true zurück, wenn hasFeature abgefragt wird – eindeutig eine Verletzung der Spezifikation.
Alle meine Style Sheets
Das Style Sheet-Objekt unterstützt nur die Referenzierung durch den Index, also über die Position des Style Sheets unter den verschiedenen Style Sheets des Dokuments. Zur Identifikation kann die href-Eigenschaft herangezogen werden, wenn das Style Sheet durch ein <link>-Tag in das Dokument eingebunden wurde.
Außer in Safari und Konquerer kann auch das title-Attribut zur Identifizierung herangezogen werden, sofern es gesetzt ist. Ein gleichlautendes title-Attribut erlaubt zudem das Zusammenfassen von zwei oder mehr Style Sheets zu einer Gruppe, die gemeinsam außer Kraft gesetzt oder deaktiviert werden können.
Auf jeden Fall aber differiert die Ansicht der Browser, welche Style Sheets in dieses Dokument eingebunden sind, erheblich. IE sieht ein Style Sheet mehr als Firefox, in dem das IE-Style Sheet im bedingten Kommentar überlesen wird. Opera erkennt das Style Sheet für IE im bedingten Kommentar, aber setzt die Eigenschaft disabled für das Style Sheet auf true. Safari und Konquerer sehen ein Style Sheet weniger als Firefox, da sie alternative Style Sheets als disabled und damit nicht sichtbar interpretieren.
<link rel="stylesheet" href="style.css" type="text/css" title="Standard" media="screen, projection" />
<link rel="alternate stylesheet" href="styleAltern.css" type="text/css" title="DeepBlue" media="screen" />
<link rel="stylesheet" href="stylePrint.css" type="text/css" media="print" />
<style type="text/css">
@media print { p { font-size: 9pt; line-height: 120%; } }
</style>
<!--[if IE]>
<link rel="stylesheet" href="styleIE.css" type="text/css" media="screen" />
<![endif]-->
<link rel="stylesheet" href="styleGray.css" type="text/css" media="screen" />
function showStyles()
{
var sheets = document.styleSheets;
var text = '';
for (var i=0; i<sheets.length; i++) {
var owner = sheets[i].ownerNode ?
sheets[i].ownerNode.nodeName : sheets[i].owningElement.nodeName;
var media = (typeof(sheets[i].media) == 'object') ?
sheets[i].media.mediaText : sheets[i].media;
text = text + 'Typ="' + sheets[i].type + '" ' +
'disabled="' + sheets[i].disabled + '" ' +
' ownerNode="' + owner + '" ' +
' parentStyleSheet="' + sheets[i].parentStyleSheet + '"\n\r' +
' href="' + sheets[i].href + '" ' +
' title="' + sheets[i].title + '" ' +
' media="' + media + '"\n\r\n\r';
}
var target = document.getElementById('jsstyleB1');
var textNode = document.createTextNode(text);
target.replaceChild(textNode, target.firstChild);
}
Safari hat ein gestörtes Verhältnis zur disabled-Eigenschaft. Zunächst setzt Safari für alle alternativen Style Sheets die Eigenschaft disabled korrekt auf true. Style Sheets, deren disabled-Eigenschaft true ist, nimmt Safari nicht das Array sheets auf.