Klasse mit JS zuweisen - richtiger Weg?
andi d
- javascript
Hallo,
ich habe für eine bessere Übersicht in einer Produkt-Aufzählung nur die Überschriften standardmäßig sichtbar, die jew. Erklärungen sind erstmal :hidden und werden per Klick auf die Überschrift sichtbar.
Das Ganze funktioniert natürlich nur bei eingeschaltetem JS, von daher war meine Überlegung, den Erklärungen Ihre zum verstecken notwendige Klasse auch mittels JS mitzugeben, sodass bei Ausgeschaltetem JS einfach alles von Anfang an zu sehen ist und bei eingeschaltetem JS der oben gewünschte Effekt auftritt.
1. Frage: Ist das so sinnvoll?
2. Frage: Wie krieg ich das hin? :)
Habe folgendes versucht:
var x = getElementById(’divid’);
x.setAttribute(’className’, ‘cssclass1′);
x.setAttribute(’class’, ‘cssclass1′);
Die Klasse wird aber anscheinend nicht zugewiesen, jedenfalls sehe ich die Erklärung selbst bei eingeschaltetem JS von Anfang an. Selbst wenn das klappen würde, stünde ich aber vor einem weiteren Problem. Jede Erklärung hat eine eigene ID. Ich weiß erstmal nicht, wieviele es sein werden. Von daher müsste man irgendwie eine Schleife bauen (nur wie weit muss ich hochzählen?)
danke & gruß
andi
Hi,
var x = getElementById(’divid’);
x.setAttribute(’className’, ‘cssclass1′);
Was sollen die Akzente? Verwende Anführungszeichen ' oder ".
cu,
Andreas
Was sollen die Akzente? Verwende Anführungszeichen ' oder ".
WYCIWYG :-/
Wie wäre es, wenn du nicht die Klasse änderst, sondern per JS einfach die Visibility weg machst, also
document.getElementById('divid').style.visibility='hidden';
und dann bei klick die visibility wieder änderst?
Gruß,
Marsmann
Mahlzeit marsmann,
Wie wäre es, wenn du nicht die Klasse änderst, sondern per JS einfach die Visibility weg machst,
Das wäre sehr ungünstig ...
... und das ist noch *freundlich* ausgedrückt.
MfG,
EKKi
Mahlzeit marsmann,
Wie wäre es, wenn du nicht die Klasse änderst, sondern per JS einfach die Visibility weg machst,
Das wäre sehr ungünstig ...
... und das ist noch *freundlich* ausgedrückt.
MfG,
EKKi
Kannst du mir bitte verraten wieso?
Also klar, du kannst das damit nicht mehr über das css ändern sondern müsstest, wenn du es anders haben möchtest, im JS rumpfuschen, aber der Aufwand wäre ja derselbe. Wenn man das JS jetzt jeweils einbindet und nicht extra in jedes HTML reinschreibt ist es auch ne zentrale Datei.
Also auf gut Deutsch: weswegen?
Grüßle,
Marsmann
Ok, Problem 1 hab ich gelöst. Statt
Habe folgendes versucht:
var x = getElementById(’divid’);
x.setAttribute(’className’, ‘cssclass1′);
x.setAttribute(’class’, ‘cssclass1′);
>
muss es heißen
~~~javascript
var x = document.getElementById("divid");
x.setAttribute("className", "cssclass1");
x.setAttribute("class", "cssclass1");
Außerdem muss dr ganze Kram kurz vor's </body> und nicht in den <head>-Bereich. Ich nehem an, weil der Code die entspr. ID an der Stelle noch nicht kennt!? Stimmt das?
Nur wie mach ich das jetzt mit der Schleife?
Mahlzeit andi d,
Außerdem muss dr ganze Kram kurz vor's </body> und nicht in den <head>-Bereich. Ich nehem an, weil der Code die entspr. ID an der Stelle noch nicht kennt!? Stimmt das?
Ja.
Übrigens gibt es keine Eigenschaft namens "class" - außerdem ist es meistens sinnvoller, Eigenschaften <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=direkt anzusprechen> und *nicht* http://de.selfhtml.org/javascript/objekte/node.htm#set_attribute@title=setAttribute() zu verwenden (beachte hierzu das "Beachten Sie:" im verlinkten Artikel).
Nur wie mach ich das jetzt mit der Schleife?
Kapsele Deinen Code in eine Funktion, der Du als Übergabeparameter die jeweilige ID verpasst, gehe in einer Schleife durch alle Kinder des relevanten Elements und rufe die Funktion mit der ID jedes Kindes (bzw. Enkels) auf ...
MfG,
EKKi
@@EKKi:
nuqneH
Übrigens gibt es keine Eigenschaft namens "class"
Wenn du einem Objekt eine solche Eigenschaft verpasst, dann gibt es sie:
var foo = {};
foo.class = "bar";
alert(foo.class); // Ausgabe: bar
Allerdings sollte man diesen Namen besser meiden, weil 'class' ein <http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviertes Wort> ist. Aus dem Grund heißt die dem @class-Attribut entsprechende Eigenschaft 'className'.
Die Eigenschaft 'class' ändert natürlich nicht den Wert eines @class-Attributs.
Qapla'
@@andi d:
nuqneH
Das Ganze funktioniert natürlich nur bei eingeschaltetem JS, von daher war meine Überlegung, den Erklärungen Ihre zum verstecken notwendige Klasse auch mittels JS mitzugeben, sodass bei Ausgeschaltetem JS einfach alles von Anfang an zu sehen ist und bei eingeschaltetem JS der oben gewünschte Effekt auftritt.
- Frage: Ist das so sinnvoll?
Ja, sehr.
- Frage: Wie krieg ich das hin? :)
Am besten setzt du die Klasse mit JavaScript bei einem Element „ganz oben“: 'html' oder 'body'; dann hast du es überall auf der Seite zur Verfügung, wenn du es an mehreren Stellen brauchst. Im Stylesheet per Nachfahrenselektor. Javascript mehrstufig zünden. In: [PERFORMANCE-BP2]
Qapla'
Hi,
- Frage: Ist das so sinnvoll?
Bedingt.
Ärgerlich kann sein, daß die zu versteckenden Elemente erstmal vorhanden sein müssen, um sie zu verstecken (das hast Du ja nun schon gemerkt).
Einfacher wäre es, den notwendigen CSS-Code, um die Elemente zu verstecken, einfach erst mit JS zu erzeugen (bei HTML reicht ein entsprechendes document.write eines STYLE-Elements mit dem Code im HEAD, bei XHTML wird es komplizierter, da write() dort nicht funktioniert).
Kein JS = kein Extra-CSS = keine Daten versteckt.
Dann werden zu versteckende Daten auch erst gar nicht beim Render angezeigt ...
... und Klassen müssen dabei gar nicht geändert werden.
Gruß, Cybaer
@@Cybaer:
nuqneH
Ärgerlich kann sein, daß die zu versteckenden Elemente erstmal vorhanden sein müssen, um sie zu verstecken (das hast Du ja nun schon gemerkt).
Das ist Unsinn. (Und du hast nicht gemerkt, dass ich schon gesat hatte, wie es geht.)
Einfacher wäre es, den notwendigen CSS-Code, um die Elemente zu verstecken, einfach erst mit JS zu erzeugen
Nein. Einfacher ist es, mit JS eine Klasse für 'head' oder 'body' zu erzeugen. Der notwendige CSS-Code steht bereits im Stylesheet.
Qapla'
Hi,
Das ist Unsinn. (Und du hast nicht gemerkt, dass ich schon gesat hatte, wie es geht.)
So weit kommt's noch, daß ich Beiträge von dir lese ... :->
... ist ja schon schlimm genug, daß ich mir deine Antworten auf meine Beiträge zu Gemüte führe. :->
Aber da auf deinen Beitrag nicht weiter eingegangen wurde, ist er wohl so oder so nicht angekommen. >8->
Nein. Einfacher ist es, mit JS eine Klasse für 'head' oder 'body' zu erzeugen.
Eine Klasse für den BODY bedingt, daß der BODY bereits existiert. Daß es nicht unbedingt der Weisheit letzter Schluß ist, wenn man bereits exitierende Elemente ändert, sollte eigentlich offensichtlich sein.
Was Du mit dem HEAD willst, ist mir so spontan auch nicht klar. Kein sichtbares Element ist Nachfahre des HEADs.
Eine Alternative wäre hingegen die Nutzung von documentElement ...
... aber ob das einfacher ist, liegt natürlich im Auge des Betrachters (ich nutze documentElement gern, aber ich halte mich nicht für den Nabel der Welt).
Gruß, Cybaer
@@Cybaer:
nuqneH
Eine Klasse für den BODY bedingt, daß der BODY bereits existiert. Daß es nicht unbedingt der Weisheit letzter Schluß ist, wenn man bereits exitierende Elemente ändert, sollte eigentlich offensichtlich sein.
Äh, nein. Wozu sollte JavaScript sonst gut sein? Warum sollte man nicht 'body' eine zusätzlich Klasse verpassen, noch dazu, wenn das Script dafür direkt hinter dem <body>-Tag steht?
Was Du mit dem HEAD willst, ist mir so spontan auch nicht klar.
Mir auch nicht. ;-)
Eine Alternative wäre hingegen die Nutzung von documentElement ...
Ja, ich meinte auch 'html', nicht 'head'. Hättest du mal meinen Beitrag gelesen, da steht’s richtig.
Qapla'
Hi,
Äh, nein. Wozu sollte JavaScript sonst gut sein?
Nicht "ändern mit JS" kann ärgerlich sein (OK, kann auch - anderes Thema), sondern "ändern mit JS nach Existenz". Insbesondere bei Anbeginn an wirksamen Layoutänderungen ist es sinnvoll, dies bereits vor der Existenz abgefrühstückt zu haben ...
Warum sollte man nicht 'body' eine zusätzlich Klasse verpassen, noch dazu,
Kein Problem - außer, daß der BODY dafür erstmal existieren muß.
Aber auch kein Problem, ...
wenn das Script dafür direkt hinter dem <body>-Tag steht?
Das geht aber nicht immer.
Davon abgesehen bin ich ja durchaus ein Anhänger solcher Sachen - und wurde, insbesondere in *diesem* Forum ja gerne beschimpft, wie man es nur wagen könne, JS im BODY zu haben, und nicht gefälligst im HEAD und auch ausgelagert.
Daß es mich freut, daß man mittlerweile von dieser Dogmatik abgekommen ist, muß ich nun wirklich nicht verhehlen ... >:->
Gruß, Cybaer
@@Cybaer:
nuqneH
Insbesondere bei Anbeginn an wirksamen Layoutänderungen ist es sinnvoll, dies bereits vor der Existenz abgefrühstückt zu haben ...
Ja! Und eben das ist ja gegeben, wenn das Script zum Setzen der Klasse "js" im Quelltext vor der Element 'foo' kommt und im Stylesheet '.js foo { bar: baz }
' steht.
wurde, insbesondere in *diesem* Forum ja gerne beschimpft, wie man es nur wagen könne, JS im BODY zu haben
Och, _dafür_ verdienst du keine Schimpfe! ;->
Qapla'
Davon abgesehen bin ich ja durchaus ein Anhänger solcher Sachen - und wurde, insbesondere in *diesem* Forum ja gerne beschimpft, wie man es nur wagen könne, JS im BODY zu haben, und nicht gefälligst im HEAD und auch ausgelagert.
Echt? Es hat doch nie irgendwo gestanden, dass JS auschliesslich in den header gehört, wer hat denn *hier* so etwas gesagt? Und dann dich dabei beschimpft???
Struppi.