JavaScript StyleSheets

Wie schon in der Einleitung erwähnt, dient JavaScript StyleSheets dem Zugang zu StyleSheets (siehe auch CSS). Dies kann entweder innerhalb eines Scriptes geschehen oder als eigenständige Style-Definition notiert werden.

JSSS im Script

Innerhalb eines normalen JavaScript -Scriptes werden die Eigenschaften und Methoden über das Style-Objekt definiert bzw. abgerufen. Es befolgt den gleichen Sytnax wie normales JavaScript und kann demnach ebenso notiert werden. Beispiel:

/* JavaScript: */
function DoIt(val)
{
document.ids.meine.color = val;
alert('Farbe geändert!');
}


<a id="meine" href="javascript:DoIt('red')">Ändern</a>

Erklärung: Bei Klick auf den Link wird die Funktion DoIt() aufgerufen und ihr der Parameter red übergeben. Mit Hilfe von JavaScript StyleSheets wird nun die Farbe des Elements mit der ID meine in den übergebenen Wert umgeändert.

JSSS als Style-Definition

Sollen StyleSheets mit Hilfe einer JavaScript StyleSheets Definition beschrieben werden, geschieht dies innerhalb des style-Elements anstelle des script-Elements. Dies macht dann Sinn, wenn diese Style-Angaben wiederrum durch Scripte verändert werden sollen. Bei JavaScript StyleSheets innerhalb eines style-Elements definiert man die Eigenschaften ebenso wie beiJSSSinnerhalb eines Scriptes. Einzigste Unterschiede sind dabei, dass das document-Objekt weggelassen werden kann und dass (natürlich) keine Funktionen aufgerufen oder sonstige JavaScript Anweisungen gestartet werden sollten. Beispiel:

Erklärung: Das Beispiels entspricht dem Beispiel ausJSSSim Script. Der Unterschied ist lediglich, dass hierbei keine Funktion aufgerufen wird, sondern das Element mit der ID meine gleich mit der beschriebenen Eigenschaft angezeigt wird.

StyleSheets in JScript

Innerhalb von JScript werden StyleSheets direkt über das jeweilige Objekt/Element angesprochen. Dazu kann das style-Objekt verwendet werden . Beispiel:

/* JScript: */
function DoIt(val)
{
document.all.meine.style.color = val;
alert('Farbe geändert!');
}


<a id="meine" href="javascript:DoIt('red')">Ändern</a>

Erklärung: Das Beispiels entspricht dem Beispiel ausJSSSim Script in JScript-Schreibweise.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project