Mit JavaScript auf Css Eigenschaften zugreifen

[JavaScript]

Hallo,

ich habe ein CSS Dokument mit einer Klasse drin.

Nun möchte ich mit JavaScript auf diese Klasse zugreifen und
die Eigenschaft "margin-left" verändern, z.B. von 95px auf 110px umstellen.

Wie es mit ID`s geht weiss ich bereits(document.getElementById), aber ich brauche das mit Klassen.

CSS-Klasse:

.umrandung
{margin-left: 95px;}

Danke im voraus für Antworten.

[suit]

ich habe ein CSS Dokument mit einer Klasse drin.

Du meinst ein CSS-Dokument, wo irgendwo ein Klassen-Selektor vorkommt?

Wie es mit ID`s geht weiss ich bereits(document.getElementById), aber ich brauche das mit Klassen.

Und auf "getElementsByClassName" bist du nicht selbst gekommen?

[Gunnar Bittersmann]

@@suit:

nuqneH

Und auf "getElementsByClassName" bist du nicht selbst gekommen?

Und darauf, dass dies in vielen (den meisten?) Fällen unsinnig ist. http://forum.de.selfhtml.org/archiv/2011/8/t206373/#m1400782 ff.

Qapla'

[JavaScript]

ich habe ein CSS Dokument mit einer Klasse drin.

Du meinst ein CSS-Dokument, wo irgendwo ein Klassen-Selektor vorkommt?

Wie es mit ID`s geht weiss ich bereits(document.getElementById), aber ich brauche das mit Klassen.

Und auf "getElementsByClassName" bist du nicht selbst gekommen?

CSS Code:

.umrandung{margin-left: 80mm;}  

JavaScript Code:

document.getElementsByClassName("umrandung").style.marginLeft = "100mm";

[Gunnar Bittersmann]

@@JavaScript:

nuqneH

document.getElementsByClassName("umrandung").style.marginLeft = "100mm";

In älteren Browsern hast du das nicht getestet, oder? Es wäre sicher eine gute Idee, die Existenz von document.getElementsByClassName("umrandung") abzufragen, bevor man darauf zugreift.

Abgesehen davon, dass es gar keine gute Idee ist, per JavaScript Werte von CSS-Eigenschaften zu ändern.

Und mm als Längeneinheit? Ist das für ein Druckstylesheet?

Qapla'

[JavaScript]

@@JavaScript:

nuqneH

document.getElementsByClassName("umrandung").style.marginLeft = "100mm";

In älteren Browsern hast du das nicht getestet, oder? Es wäre sicher eine gute Idee, die Existenz von document.getElementsByClassName("umrandung") abzufragen, bevor man darauf zugreift.

Abgesehen davon, dass es gar keine gute Idee ist, per JavaScript Werte von CSS-Eigenschaften zu ändern.

Und mm als Längeneinheit? Ist das für ein Druckstylesheet?

Qapla'

Ne, aber solange mm zulässig ist auf dem Monitor ist es doch kein Problem
es als Längeneinheit zu benutzen?
Problem ist halt nur, dass es auf Monitoren mit weniger Zoll anders dargestellt wird, aber da ich diese Homepage nur zu Testzwecken mache, ist
das vorerst kein Problem.

[suit]

Ne, aber solange mm zulässig ist auf dem Monitor ist es doch kein Problem
es als Längeneinheit zu benutzen?

Sofern du einen Monitor findest, auf dem die Auflösung auch nur ansatzweise richtig eingestellt ist, mag das zutreffen. Aber das hat eher mit Glück zu tun - idR. ist das nichtmal bei "Grafikern" der Fall - dieses Manko wird oft durch das Grafikprogramm (z.B. InDesign) korrigiert, die Werte sind auf Betriebssystemebene (und somit für den Browser) trotzdem völlig falsch.

Problem ist halt nur, dass es auf Monitoren mit weniger Zoll anders dargestellt wird, aber da ich diese Homepage nur zu Testzwecken mache, ist

Nein, es wird auf jedem Monitor falsch dargestellt, wo die Auflösung nicht exakt passt.

[JavaScript]

Ne, aber solange mm zulässig ist auf dem Monitor ist es doch kein Problem
es als Längeneinheit zu benutzen?

Sofern du einen Monitor findest, auf dem die Auflösung auch nur ansatzweise richtig eingestellt ist, mag das zutreffen. Aber das hat eher mit Glück zu tun - idR. ist das nichtmal bei "Grafikern" der Fall - dieses Manko wird oft durch das Grafikprogramm (z.B. InDesign) korrigiert, die Werte sind auf Betriebssystemebene (und somit für den Browser) trotzdem völlig falsch.

Problem ist halt nur, dass es auf Monitoren mit weniger Zoll anders dargestellt wird, aber da ich diese Homepage nur zu Testzwecken mache, ist

Nein, es wird auf jedem Monitor falsch dargestellt, wo die Auflösung nicht exakt passt.

ich habe eine neue frage.. ich möchte auf eine klasse in css zugreifen und einen Wert davon ändern. Dieser ist der opacity Wert. Der sinn ist, dass ich ein Fade In Effekt machen möchte. Mir fehlt nur die korrekte schreibweise von -moz-opacity in JavaScript. weiss das einer?

[Gunnar Bittersmann]

@@JavaScript:

nuqneH

ich habe eine neue frage..

Und warum zitierst du das komplette Vorgängerposting, wenn du dich überhaupt nicht darauf beziehst?

Und unterlasse bitte Doppelpostings.

Mir fehlt nur die korrekte schreibweise von -moz-opacity in JavaScript.

Nein dir fehlt das Verständnis für die Möglichkeiten von CSS.

Qapla'

[molily]

document.getElementsByClassName("umrandung").style.marginLeft = "100mm";

getElementsByClassName liefert dir, wie der Name schon andeutet, nicht ein Element, sondern eine Liste von Elementen. Diese Liste hat keine style-Eigenschaft. Die einzelnen Elemente in der Liste hingegen haben eine. Du müsstest die Liste also durchlaufen:

var elements = document.getElementsByClassName("umrandung");  
for (var i = 0, l = elements.length; i < l; i++) {  
  elements[i].style.marginLeft = "...";  
}

Einfacher geht es wie gesagt, wenn du einfach eine zweite CSS-Regel mit einem Klassen-Selektor einfügst, welche alle Nachfahren-Elemente mit der Klasse umrandung formatiert:

.dickeumrandung .umrandung { ... }

(Wählt alle Elemente mit der Klasse umrandung aus, wenn sie in einem Element mit der Klasse dickeumrandung verschachtelt sind.)

Dann kannst du einfach
document.body.className += " dickeumrandung";
notieren und damit sämtliche Elemente umformatieren. Das Umschalten wird damit vereinfacht.

Mathias

[JavaScript]

Ich habe mein vorheriges Problem gelöst.
Jedoch habe ich eine neue Frage.

Wieso funktioniert das nicht:

array_speichern = new Array (document.getElementByClassName("name"));

Die Funktion müsste doch in "array_speichern" die Werte von der Klasse "name"
hineinspeichern.

Bin leider noch ziemlich am Anfang von JavaScript.

[Matti Mäkitalo]

Hi,

array_speichern = new Array (document.getElementByClassName("name"));
Die Funktion müsste doch in "array_speichern" die Werte von der Klasse "name"
hineinspeichern.

Nein.

Znächst: document.getElementByClassName liefert eine NodeList (stell dir das für den Anfang mal als Array vor) mit allen Elementknoten deines Dokuments, welche die Klasse "name" haben.

Als nächstes rufst du den Konstruktor von Array auf. <http://de.selfhtml.org/javascript/objekte/array.htm@title=SelfHTML: Array> zeigt dir, welche Varianten dieser Konstruktor hat. Du nutzt implizit Schema 3 (weil die NodeList keine Zahl ist) und erstellst damit einen Array, welcher als erstes Element deine NodeList hat.

Warum denkst du, dass darin die Werte aus "name" auftauchen sollte? Der Funktionsname sagt doch, dass die Funktion eine Liste (das sagt der Plural) von Elementen zurückliefert, welche einer Klasse angehören (get_Elements__s__ByClassName_).

Bis die Tage,
Matti