Java Reference
In-Depth Information
Repräsentation in der Webseite abgefragt und meist auch geändert werden können. Unab-
hängig von dem konkreten Zugrif auf ein Element werden Sie in allen Fällen die gleichen
Eigenschaten und Methoden zum Umgang mit dem Element zur Verfügung haben und
dementsprechend auch auf
style
zugreifen können.
Die Stileigenschaten des
style
-Objekts unterscheiden sich teilweise in der Schreibweise
ein wenig von der Schreibweise bei den CSS-Regeln. Dies führt einerseits leicht zu Fehlern,
aber andererseits lassen sich viele Namen der Eigenschaten gut aus CSS herleiten. Im All-
gemeinen gilt, dass der Bindestrich bei CSS-Attributen bei den Eigenschaten des
style
-
Objekts entfällt und stattdessen der nachfolgende Buchstabe groß zu schreiben ist (Groß-
und Kleinschreibung ist zu beachten - die Camel-Notation). Beispiele:
Aus
font-size
bei CSS wird
fontSize
beim
style
-Objekt.
Aus
background-color
bei CSS wird
backgroundColor
bei der Benennung der identi-
schen Eigenschat des
style
-Objekts.
Aus
text-align
bei CSS wird
textAlign
beim
style
-Objekt.
Wenn man diese Regel einhält, werden in den meisten Fällen die Eigenschaten des
style
-
Objekts direkt aus CSS-Attributen herzuleiten sein (und umgekehrt).
HInWEIS:
Achten Sie beim Umgang mit den Werten von Eigenschaten des
style
-Objekts darauf, dass viele Werte mit
Einheiten
(etwa
px
oder
pt
) ange-
geben werden müssen.
8.14.3.1■Mit style eine Webseite formatieren
Sie können mit dem
style
-Objekt eine Webseite statisch formatieren, als ob Sie Regeln
direkt mit CSS setzen. Etwa so:
Listing 8.56■
Beispiele zum Setzen von Stileigenschaten mit style
document.getElementsByTagName("h2")[0].style.color = "red";
document.getElementsByTagName("h2")[1].style.backgroundColor = "blue";
document.getElementsByTagName("body")[0].style.textAlign = "center";
document.getElementsByTagName("div")[1].style.fontSize = "36px";
Diese Anweisungen müssen einfach nach dem Laden des DOM-Baums ausgeführt werden,
etwa mit
window.onload=init;
, wenn diese in einer entsprechenden Funktion notiert sind.
Nun möchte ich aber gleich am Anfang den Wind aus den Segeln nehmen und Sie dringend
davor warnen, dass Sie im allgemeinen Fall so Ihre Webseiten statisch formatieren! Warum
das? Nun - Sie geben damit die Trennung von Funktionalität und Layout auf! Es ist doch das
primäre Ziel einer modernen Webapplikation, dass Struktur, Layout und Funktionalität ganz
streng getrennt werden, und das haben wir eben nicht. Und warum sollten Sie mit JavaScript
und DOM-Objekten formatieren, wenn das genauso gut direkt mit CSS (am besten mit exter-
nen Dateien) geht? Na ja - es gibt einen Grund, der in dem Beispiel auch schon versteckt ist.
Logik!
Solange Sie rein auf Basis von CSS-Selektoren beim Laden der Webseite alle notwen-
digen Formatierungen vornehmen können, sollten Sie die Formatierung per
style
meiden
wie der Teufel das Weihwasser. Aber wenn Sie eine Logik benötigen, die Ihnen die CSS-
Selektoren nicht bieten, oder aber Sie dynamisch die Formatierungen ändern wollen, nach-
dem die Seite bereits geladen wurde, haben Sie mit
style
das perfekte Hilfsmittel.
Search WWH ::
Custom Search