Parameter übergeben

[Michael]

Hallo,

ich möchte einem HTML-Element eine Klasse zuweisen und dies dann mit JavaScript formatieren.

z.B. <div class=“Schalter“>Licht Ein/Aus</div>

Nun brauche ich noch die Größe und Position des Schalters und das möchte ich mit Hilfe von Parametern machen. Die dann vom Programm gefunden werden und das Element formatieren.

z.B. ~~~html <div class=“Schalter“ parameter=“L50O100B200H100“>Licht Ein/Aus</div>

oder ohne Fehlermeldung im HTML  
  
z.B. `<div class=“Schalter“ class=“L50O100B200H100“>Licht Ein/Aus</div>`{:.language-html}  
  
Jetzt muss ich mit JavaScript nur noch wissen, was in der zweiten Klasse steht.  
Kann mir also jemand sagen, ob es möglich ist, auf alle Klassen eines Elements zuzugreifen, auf das man auch nur über eine Klasse zugreift und deren Inhalt auszulesen.  
  
Für eure Hilfe vielen Dank  
  
Michael  

[LX]

Die doppelte Verwendung des gleichen Attributs ist in HTML nicht valide und funktioniert dementsprechend auch nicht in Javascript. Ich empfehle wahlweise die Zusammenfassung der beiden Klassen in einem Attribut (kann man bspw. mit split(' ') in ein Array auftrennen) oder aber die Verwendung von zusätzlichen HTML5-data-Attributen, sofern Du in einem HTML5-Kontext arbeitest.

Gruß, LX

[Cheatah]

Hi,

Nun brauche ich noch die Größe und Position des Schalters und das möchte ich mit Hilfe von Parametern machen.

HTML kennt keine Parameter. Du meinst Attribute. Wie LX schon sagte, ist jedes Attribut in einem HTML-Element einmalig.

z.B. ~~~html

<div class=“Schalter“ parameter=“L50O100B200H100“>Licht Ein/Aus</div>

> oder ohne Fehlermeldung im HTML  
  
HTML5 erlaubt es, beliebige Attribute mit dem Prefix "data-" zu verwenden. data-parameter="L50O100B200H100" ist also valide.  
  

> Jetzt muss ich mit JavaScript nur noch wissen, was in der zweiten Klasse steht.  
  
Klassen dienen der Klassifizierung. Sie sind ungeeignet für individuelle Daten. Solltest Du eine Klasse für Deine Zwecke für sinnvoll halten, so frage Dich: Was wäre die Gemeinsamkeit \*aller\* Elemente, die die Klasse "L50O100B200H100" besitzen, und warum wählst Du keine sprechende Bezeichnung, die dieser Gemeinsamkeit verständlich Ausdruck verleiht?  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes

[Michael]

Hallo,

und Danke für die Antworten. Ihr habt auf jeden Fall recht. Bis gestern kannte ich das „data-*“ Attribut nicht. Ist toll dass es so was gibt. Ich habe lange darauf gewartet und wenn ich meine Bücher richtig lesen würde, wäre ich selber darauf gekommen.

Also sieht die Zeile nun so aus.

<div class=“Schalter“ data-parameter=“L50O100B200H100“>Licht Ein/Aus</div>

Die Klasse „Schalter“ ist richtig so, da auf einer Seite alle Elemente in Klassen aufgeteilt sind. Jetzt muss ich aber immer noch nach dem Laden der Seite alle Elemente formatieren.

Ich habe mir überlegt, ob es möglich ist, sämtliche Elemente einer Seite nach ihrem Klassennamen zu durchsuchen und dann nach Klasse und Parameter zu formatieren.

Michael

[Der Martin]

Hi,

Also sieht die Zeile nun so aus.
<div class=“Schalter“ data-parameter=“L50O100B200H100“>Licht Ein/Aus</div>

und wenn du jetzt noch richtige Anführungszeichen verwendest, bist du auf einem guten Weg ...

Ich habe mir überlegt, ob es möglich ist, sämtliche Elemente einer Seite nach ihrem Klassennamen zu durchsuchen und dann nach Klasse und Parameter zu formatieren.

Dafür gibt es ja CSS und den Klassen- und Attributselektor.

Ciao,
 Martin

[Michael]

Hallo,

normalerweise sind es die Anderen, die einem daran erinnern in welchem Forumsbereich man ist. Jetzt muss ich das selber tun. Der Vorschlag mit dem "data-*“ ist super und ich verspreche auch immer die richtigen Hochkomma zu verwenden.

Aber ich will doch nach dem Laden der Seite die Elemente die zu einer Gruppe gehören, mit dem entsprechenden Parametersatz formatieren und das mit Hilfe von JavaScript.

Die Frage also: Kann man mit einer Schleife alle Elemente einer Seite durchsuchen, schauen ob sie zu einer Klasse gehören, dann den Inhalt von "data-parameter" einlesen und mit dem Inhalt das Element formatieren. Es geht übrigens um eine SPS und daher stehen nicht nur css Attribute drin.

Wenn mir da Jemand helfen könnte, wäre ich Ihm sehr dankbar

Michael

[dave]

Hi,

Aber ich will doch nach dem Laden der Seite die Elemente die zu einer Gruppe gehören, mit dem entsprechenden Parametersatz formatieren und das mit Hilfe von JavaScript.

Nur weil du es mit JavaScript machen willst heißt dass nicht dass es auch sinnvoll ist.

Die Frage also: Kann man mit einer Schleife alle Elemente einer Seite durchsuchen, schauen ob sie zu einer Klasse gehören, dann den Inhalt von "data-parameter" einlesen und mit dem Inhalt das Element formatieren.

Dazu braucht man keine Schleife. Wenn dann wäre eine rekursive Funktion wohl besser geeignet.
Oder man nimmt einfach document.getElementsByClassName().

Es geht übrigens um eine SPS und daher stehen nicht nur css Attribute drin.

Das konnte bis jetzt niemand wissen :P

~dave

[Matti Mäkitalo]

Hi,

und Danke für die Antworten. Ihr habt auf jeden Fall recht. Bis gestern kannte ich das „data-*“ Attribut nicht. Ist toll dass es so was gibt. Ich habe lange darauf gewartet und wenn ich meine Bücher richtig lesen würde, wäre ich selber darauf gekommen.

Ich nutze data-* Attribute seit geraumer Zeit, will dich aber auf zwei Alternativen hinweisen, mit denen ich das Problem früher umgangen habe.
Möglichkeit 1: andere Attribute zweckentfremden. Ich habe da häufig das ID-Attribute genommen (wenn ich es nicht anderweitig gebraucht habe), andere Attribute wie "rel" werden auch häufig propagiert.

Möglichkeit 2: im DOM ein verstecktes Element unterbringen, welches diese Information enthält.
Beispiel: dein Element ist ein div.
Entweder kannst du nun z.B. ein verstecktes input-Feld als Kind oder direkten Nachbarn unterbringen, so dass du es mit DOM-Kinder-/Nachbarselektoren finden kannst, oder du verknüpfst es über z.B. die ID des div-Elements.

Heutzutage würde ich aber einfach data-* Attribute nehmen.

Bis die Tage,
Matti