Kontakt aufnehmen

JavaScript: Style (Netscape)

Clientseitiges JavaScript bietet durch 3 Objekte den Zugriff auf die StyleSheet-Eigenschaften und -methoden der Elemente eines Dokuments. Diese Objekte sind classes, ids und tags. JScript und die Versionen des Netscape Navigators ab 6.x unterstützen diese nicht (ausschließlich der Netscape 4.x) - hier muss über das style-Objekt auf die Eigenschaften zugegriffen werden.

JavaScript 1.2 classes  nach oben

Das classes-Objekt stellt einen Grundstein auf alle Elemente einer bestimmten Klasse dar. An das Objekt wird der Klassenname quasi als Unterobjekt angehängt. Danach folgt entweder ein Elementname oder all. Als Resultat wird eine Referenz auf alle Elemente oder alle Elemente eines Elementnames zurückgegeben, die der definierten Klasse entsprechen. Dieses zurückgegeben Objekt enthält alle Style-Eigenschaften und -methoden, die unter JavaScript definiert sind.
Notation: Objekt.classes.Klasse.Elementname
Notation: Objekt.classes.Klasse.all

document.classes.KlasseA.P.color = 'red';
// spricht alle <p class="KlasseA"> an und setzt die Textfarbe auf rot

document.classes.KlasseB.all.color = 'black';
// spricht alle <p class="KlasseB">, <em class="KlasseB"> ...
// an und setzt die Textfarbe auf schwarz

JavaScript 1.2 ids  nach oben

Das ids-Objekt stellt eine Referenz auf das Elemente einer bestimmten ID dar. An das Objekt wird die ID (id-Attribut) quasi als Unterobjekt angehängt. Dieses zurückgegebene Objekt enthält alle Style-Eigenschaften und -methoden, die unter JavaScript definiert sind.
Notation: Objekt.ids.ID

document.ids.meineID.color = 'red';
// spricht das Element <p id="meineID">, <span id="meineID">
// oder <h1 id="meineID"> an und setzt die Textfarbe auf rot

JavaScript 1.2 tags  nach oben

Das tags-Objekt stellt eine Referenz auf alle Elemente eines bestimmten Elementnamens dar. An das Objekt wird der Elementname quasi als Unterobjekt angehängt. Dieses zurückgegebene Objekt enthält alle Style-Eigenschaften und -methoden, die unter JavaScript definiert sind.
Notation: Objekt.tags.Elementname

document.tags.P.color = 'red';
// spricht alle Elemente <p> an und setzt die Textfarbe auf rot

JavaScript 1.2 Eigenschaften  nach oben

Die Style-Eigenschaften entsprechen in etwa den Eigenschaften, die mit CSS 1 definiert wurden. Aufgrund der Namenskonventionen von JavaScript mußten die Eigenschaften jedoch umbenannt werden. Die folgende Tabelle stellt die JavaScript -Namen den CSS-Namen gegenüber:

JavaScript -Name CSS-NameKurzbeschreibung
aligntextAlignElementausrichtung
backgroundColorbackground-colorHintergrundfarbe
backgroundImagebackground-imageHintergrundbild
borderBottomWidthborder-bottom-widthRahmenbreite unten
borderColorborder-colorRahmenfarbe
borderLeftWidthborder-left-widthRahmenbreite links
borderRightWidthborder-right-widthRahmenbreite rechts
borderStyleborder-styleRahmenstil
borderTopWidthborder-top-widthRahmenbreite oben
clearclearElementfluss
colorcolorFarbe
displaydisplayAnzeigedefinition
fontFamilyfont-familySchriftart
fontSizefont-sizeSchriftgröße
fontStylefont-styleSchriftstil
fontWeightfont-weightSchriftbreite
lineHeightline-heightZeilenhöhe
listStyleTypelist-style-typeListentyp
marginBottommargin-bottomAußenabstand unten
marginLeftmargin-leftAußenabstand links
marginRightmargin-rightAußenabstand rechts
marginTopmargin-topAußenabstand oben
paddingBottompadding-bottomInnenabstand unten
paddingLeftpadding-leftInnenabstand links
paddingRightpadding-rightInnenabstand rechts
paddingToppadding-topInnenabstand oben
textAligntext-alignTextausrichtung
textDecorationtext-decorationTextdekoration
textIndenttext-indentTextvorschub
textTransformtext-transformTextumwandlung
whiteSpacewhite-spaceLeerzeichenbehandlung
widthwidthBreite

Methoden  nach oben

JavaScript 1.2 borderWidths

Die borderWidths-Methode setzt die borderWidthTop-, borderWidthRight-, borderWidthBottom- und borderWidthLeft-Eigenschaften gleichzeitig auf einen neuen Wert. Dazu müssen vier Werte übergeben werden die den Eigenschaften (in der beschriebenen Reihenfolge) übergeben werden sollen.
Notation: Objekt.borderWidths(oben, rechts, unten, links)

document.tags.TABLE.borderWidths('2 px','3 px','2 px','3 px');

JavaScript 1.2 margins

Die margins-Methode setzt die marginTop-, marginRight-, marginBottom- und marginLeft-Eigenschaften gleichzeitig auf einen neuen Wert. Dazu müssen vier Werte übergeben werden die den Eigenschaften (in der beschriebenen Reihenfolge) übergeben werden sollen.
Notation: Objekt.margins(oben, rechts, unten, links)

document.tags.P.margins('2 px','3 px','2 px','3 px');

JavaScript 1.2 paddings

Die paddings-Methode setzt die paddingTop-, paddingRight-, paddingBottom- und paddingLeft-Eigenschaften gleichzeitig auf einen neuen Wert. Dazu müssen vier Werte übergeben werden die den Eigenschaften (in der beschriebenen Reihenfolge) übergeben werden sollen.
Notation: Objekt.paddings(oben, rechts, unten, links)

document.tags.P.paddings('2 px','3 px','2 px','3 px');

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

Über uns

Stefan Wienströer

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

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern