ID oder Class zur Laufzeit ändern

[dey]

Hallo,

1.
kann ich via Java script dei ID oder Class eines tags ändern, wenn dieser schon geladen wurde

2.
sollte der entsprechende Code vor oder nach body plaziert sein

3.
da ich damit meinen active link bestimmen will und dessen aussehen via CSS anpassen möchte, muss ich das CSS noch einmal nachladen?

bydey

[Struppi]

kann ich via Java script dei ID oder Class eines tags ändern, wenn dieser schon geladen wurde

Javascript wird zusammen geschrieben.
Du kannst die id ändern indem du die Eigenschaft id änderst.
die Klasse indem du className änderst.
Nachzulesen in selfhtml hier: http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften

sollte der entsprechende Code vor oder nach body plaziert sein

egal.

da ich damit meinen active link bestimmen will und dessen aussehen via CSS anpassen möchte, muss ich das CSS noch einmal nachladen?

Wieso?

Struppi.

[MudGuard]

Hi,

sollte der entsprechende Code vor oder nach body plaziert sein
egal.

Richtig, die Platzierung ist egal.

Nicht egal ist, wann der Code ausgeführt wird - das darf natürlich erst dann geschehen, wenn das zu ändernde Element auch existiert (z.B. onload).

cu,
Andreas

[dey]

Hallo,

sollte der entsprechende Code vor oder nach body plaziert sein
egal.

Richtig, die Platzierung ist egal.

Nicht egal ist, wann der Code ausgeführt wird - das darf natürlich erst dann geschehen, wenn das zu ändernde Element auch existiert (z.B. onload).

Danke, habe meinen Code ohnehin an das Ende gesetzt:

if (document.all && document.all.navi_link4.style.setAttribute) {
    document.all.navi_link4.style.setAttribute("id", "navi_link4_a", "false");
  } else {
    document.getElementById("navi_link4").id = "navi_link4_a";
  }

Wenn ich das richtig interpretiere ist der erste Teil für FF und der Zweite für IE.
FF funktioniert toll.
IE leider nicht. Habe das anstatt mit ID ändern schon über border getestet und zwar erfolgreich.
Woran hängt es im IE?

bydey

[Struppi]

Danke, habe meinen Code ohnehin an das Ende gesetzt:

Du rufst den Code direkt ohne Funktion auf?

if (document.all && document.all.navi_link4.style.setAttribute) {
    document.all.navi_link4.style.setAttribute("id", "navi_link4_a", "false");
  } else {
    document.getElementById("navi_link4").id = "navi_link4_a";
  }

Wenn ich das richtig interpretiere ist der erste Teil für FF und der Zweite für IE.

umgekehrt, aber setAttribute ist nicht nötig.
Diese Zeile reicht aus:
document.getElementById("navi_link4").id = "navi_link4_a";

Struppi.

[dey]

Hallo,

Du rufst den Code direkt ohne Funktion auf?

Ja?! Ist das schlimm?
Einfach am Ende zwischen </body> und </html>

Wenn ich das richtig interpretiere ist der erste Teil für FF und der Zweite für IE.

Da mach ich mir die Mühe setze für IE und FF unterschiedliche Attribute und dann vertausch ichs auch noch.

umgekehrt, aber setAttribute ist nicht nötig.
Diese Zeile reicht aus:
document.getElementById("navi_link4").id = "navi_link4_a";

Kann es sein dass mein if davor(welches ich aus einem Beispiel kopiert habe) gar kein Sinn macht?

bydey

[Struppi]

Du rufst den Code direkt ohne Funktion auf?

Ja?! Ist das schlimm?

Nein, aber dann kannst du die id auch direkt im HTML Code setzen.

umgekehrt, aber setAttribute ist nicht nötig.
Diese Zeile reicht aus:
document.getElementById("navi_link4").id = "navi_link4_a";

Kann es sein dass mein if davor(welches ich aus einem Beispiel kopiert habe) gar kein Sinn macht?

Ja, meiner Meinung ist setAttribute in dem Falle überflüssig.

Struppi.

[dey]

Danke Struppi,

Nein, aber dann kannst du die id auch direkt im HTML Code setzen.

Da fehlt etwas info: ich will über ca. 50 - Seiten die Navi exakt gleich haben, um im Falle einer Änderung/ Erweiterung mit seitenübergreifendem Copy'n Paste alle zu ändern.
Style und dynamik sollen ausschliesslich über CCS und JS laufen

Ja, meiner Meinung ist setAttribute in dem Falle überflüssig.

Ja, es funktioniert mit

<script language="JavaScript" type="text/JavaScript">

document.getElementById("navi_link2").id = "navi_link2_a";

</script>

bestens.

bydey

[Struppi]

Nein, aber dann kannst du die id auch direkt im HTML Code setzen.

Da fehlt etwas info: ich will über ca. 50 - Seiten die Navi exakt gleich haben, um im Falle einer Änderung/ Erweiterung mit seitenübergreifendem Copy'n Paste alle zu ändern.
Style und dynamik sollen ausschliesslich über CCS und JS laufen

Dafür ist doch CSS da.
Wenn du das aussehen eines Elementes änderst baut man i.d.R. kein JS ein, sondern paßt das aussehen in der CSS datei an.

Struppi.

[dey]

Hallo,

Dafür ist doch CSS da.
Wenn du das aussehen eines Elementes änderst baut man i.d.R. kein JS ein, sondern paßt das aussehen in der CSS datei an.

ich brauche das JS, um mein tag a:active eindeutig zu bestimmen

Erklärung hier
https://forum.selfhtml.org/?t=112812&m=714756

bydey

[MudGuard]

Hi,

if (document.all && document.all.navi_link4.style.setAttribute) {
    document.all.navi_link4.style.setAttribute("id", "navi_link4_a", "false");
  } else {
    document.getElementById("navi_link4").id = "navi_link4_a";
  }

Wenn ich das richtig interpretiere ist der erste Teil für FF und der Zweite für IE.

Nein, eher umgekehrt. Wobei vom ersten Teil (document.all) auch Opera betroffen ist.

Ich würde zuerst auf document.getElementById abfragen (das erwischt alle modernen Browser und die IEs ab 5.0).
Und im else-Teil ggf. noch zwischen document.all und document.layers (zur Unterteilung von IE 4.0 und Netscape 4.x).

IE leider nicht. Habe das anstatt mit ID ändern schon über border getestet und zwar erfolgreich.
Woran hängt es im IE?

document.all.navi_link4.style.setAttribute("id", "navi_link4_a", "false");

Du versuchst hier, im style-Objekt ein Attribut zu setzen, statt dieses im Link selbst zu tun.

cu,
Andreas

[wahsaga]

hi,

da ich damit meinen active link bestimmen will und dessen aussehen via CSS anpassen möchte

da dieser link auf die aktuelle seite verlinkt, möchtest du gar nicht, dass er ein link ist (auf die aktuelle seite verlinken soll man nämlich nicht machen) - sondern ihn durch einen span mit dem gleichen inhalt o.ä. ersetzen, und diesen dann gesondert formatieren.

gruß,
wahsaga

[dey]

Hallo wahsaga,

da dieser link auf die aktuelle seite verlinkt, möchtest du gar nicht, dass er ein link ist (auf die aktuelle seite verlinken soll man nämlich nicht machen) - sondern ihn durch einen span mit dem gleichen inhalt o.ä. ersetzen, und diesen dann gesondert formatieren.

Da sind wir wieder beim Thema von gestern, dass ich meinen Navigationsbereich auf allen Seiten EXAKT gleich haben will und die dynamik nur durch CSS und in diesem Falle JS erreichen möchte.

Kann ich dem attribute a seine Fähigkeit zu verlinken wegnehmen?

bydey

[Sven Rautenberg]

Moin!

Kann ich dem attribute a seine Fähigkeit zu verlinken wegnehmen?

Du kannst dem speziellen A seine Fähigkeit, die Klickhand anzuzeigen, wegnehmen, und stattdessen den normalen Pfeil anzeigen lassen. Dann klicken die User nicht mehr so einfach.

- Sven Rautenberg

[dey]

Hallo Sven,

Kann ich dem attribute a seine Fähigkeit zu verlinken wegnehmen?

Du kannst dem speziellen A seine Fähigkeit, die Klickhand anzuzeigen, wegnehmen, und stattdessen den normalen Pfeil anzeigen lassen. Dann klicken die User nicht mehr so einfach.

Ich interpretiere wahsaga Hinweis als
a) unsaubere Arbeitsweise und
b) weiterhin nicht kritisch

Demnach wäre dein Vorschlag nur ein Weg die unsaubere Arbeitsweise zu verstecken; die Arbeitsweise wäre aber immer noch unsauber.
Und eigentlich nix gewonnen.

Mein neuer Weg wäre, wenn ich nicht so faul wäre:

• den Linktext/ Link-Image 2x anzugeben
• einmal innerhalb und einmal ausserhalb des a-tags
• das ganze dann in Abhängigkeit mit display:none maskieren

bydey

[Sven Rautenberg]

Moin!

Demnach wäre dein Vorschlag nur ein Weg die unsaubere Arbeitsweise zu verstecken; die Arbeitsweise wäre aber immer noch unsauber.
Und eigentlich nix gewonnen.

Letztendlich geht es um Benutzerführung.

Woran erkennt man, dass der Pixel, auf den die "Maus" (Bezeichnung für das irgendwie aussehende grafische Icon, welches über den Bildschirm bewegt wird) zeigt, zu einem Link gehört?

Möglichkeit A: Die Maus nimmt die Form einer Hand an, und evtl. wird zusätzlich irgendeine Art von Hover angezeigt.
Möglichkeit B: Man klickt drauf und guckt, was passiert, auch wenn kein Hovereffekt zu sehen ist und auch keine Hand angezeigt wurde.

Ich bezweifle, dass ein Benutzer einen Link ohne Hand als solchen erkennt und benutzt. Insbesondere, wenn um diesen Link herum viele andere Links stehen, die mit Hand und passender Hervorhebung viel attraktivere Linkziele darstellen.

Und auch das Argument, ein Grobmotoriker könne ja aus Versehen vom eigentlichen Link abkommen und den zu deaktivierenden Link klicken, lasse ich nicht gelten. Denn genausogut könnte er ja auch auf einen ganz anderen Link kommen und den aus Versehen klicken. In beiden Fällen wird er wahrscheinlich feststellen, dass die erscheinende Seite nicht das ist, was er erwartet hat, und eine erneute Auswahl treffen.

Mein neuer Weg wäre, wenn ich nicht so faul wäre:

• den Linktext/ Link-Image 2x anzugeben
• einmal innerhalb und einmal ausserhalb des a-tags
• das ganze dann in Abhängigkeit mit display:none maskieren

Ich bin sicher, du könntest mit den entsprechenden DOM-Methoden auch einfach das A-Element gegen ein SPAN- oder sonstwie passendes Element austauschen. Das spart dann auch Ladezeit.

Und letztendlich: Wer kein Javascript an hat, der wird bei beiden Methoden den Link immer noch als aktiv sehen - mit CSS wie oben beschrieben aber nicht mehr gereizt, auch draufzuklicken.

- Sven Rautenberg

[dey]

Hallo,

Und letztendlich: Wer kein Javascript an hat, der wird bei beiden Methoden den Link immer noch als aktiv sehen - mit CSS wie oben beschrieben aber nicht mehr gereizt, auch draufzuklicken.

Ohne JS führt in meinem Fall gar nichts zum Ziel, da ich meinen active link ja nicht über a:active im CSS definiere sondern über die mit JS geänderte ID.

Warum:
wenn ich ein Untermenu habe und dort einen weiterführenden Link benutzt habe wird in meiner Hauptnavigation kein Link mehr als active geführt.
Also setze ich mein JS mit der geänderten ID in alle Seiten die zum entsprechenden Link in der Hauptnavigation passen.

bydey

[MudGuard]

Hi,

Und letztendlich: Wer kein Javascript an hat, der wird bei beiden Methoden den Link immer noch als aktiv sehen - mit CSS wie oben beschrieben aber nicht mehr gereizt, auch draufzuklicken.

Ohne JS führt in meinem Fall gar nichts zum Ziel, da ich meinen active link ja nicht über a:active im CSS definiere sondern über die mit JS geänderte ID.

Was hat a:active damit zu tun? Das gilt ja nur während des Klicks (vom Drücken bis zum Loslassen des Mausbuttons).

Wie wäre es damit, dem Link, der zur aktuellen Seite gehört (was NICHTS mit :active zu tun hat) einfach seine Link-Eigenschaft zu nehmen - sprich: das href-Attribut zu entfernen.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Wie wäre es damit, dem Link, der zur aktuellen Seite gehört (was NICHTS mit :active zu tun hat) einfach seine Link-Eigenschaft zu nehmen - sprich: das href-Attribut zu entfernen.

Offenbar führen viele Wege nach Rom.

Einen schönen Freitag noch.

Gruß, Ashura

[dey]

Hallo,

Was hat a:active damit zu tun? Das gilt ja nur während des Klicks (vom Drücken bis zum Loslassen des Mausbuttons).

Uuuups, sollte ich da was verwechselt haben?
Irgendwie gibt da noch einen anderen Link-Status, der irgendwas mit active heisst.
Sagt der denn wenigstens aus, dass dieser Link der Seite entspricht, die auch gerade geöffnet ist.

Wie wäre es damit, dem Link, der zur aktuellen Seite gehört (was NICHTS mit :active zu tun hat) einfach seine Link-Eigenschaft zu nehmen - sprich: das href-Attribut zu entfernen.

Das geht vermutlich wieder mal nur mit JS:
document.getElementById("navi_link4").href = "";
Unglücklicherweise besitzt mein tag a keine ID.

bydey

[wahsaga]

hi,

Irgendwie gibt da noch einen anderen Link-Status, der irgendwas mit active heisst.

nein.

Sagt der denn wenigstens aus, dass dieser Link der Seite entspricht, die auch gerade geöffnet ist.

nein.
an irgendwelchen gerade geladenen "seiten" hat CSS nicht das geringste interesse.

Das geht vermutlich wieder mal nur mit JS:
document.getElementById("navi_link4").href = "";
Unglücklicherweise besitzt mein tag a keine ID.

und das fällt dir jetzt erst auf?
d.h., du hast dir vor diesem ganzen thread noch gar keine gedanken gemacht, wie du per JS unter allen links eigentlich den herausfindest, der zur "aktuellen seite" führt ...?

du kannst natürlich alle in frage kommenden links durchgehen, und schauen, ob der inhalt ihres href-attributes mit dem übereinstimmt, was die eigenschaften des location-objektes (oder ggf. auch document.URL) enthalten.
aber vorsicht: IIRC ergänzten manche browser bspw. das src-attribut von bildern mit zu einem kompletten URL, andere wiederum nicht. könnte(!) bei a.href ggf. ähnlich sein.

gruß,
wahsaga

[dey]

Hallo,

nein.
an irgendwelchen gerade geladenen "seiten" hat CSS nicht das geringste interesse.

OK, macht nix

Das geht vermutlich wieder mal nur mit JS:
document.getElementById("navi_link4").href = "";
Unglücklicherweise besitzt mein tag a keine ID.

und das fällt dir jetzt erst auf?
d.h., du hast dir vor diesem ganzen thread noch gar keine gedanken gemacht, wie du per JS unter allen links eigentlich den herausfindest, der zur "aktuellen seite" führt ...?

Bis zu dem Zeitpunkt wo ich ans href vom a-tag ran soll brauchte ich es ja nicht

du kannst natürlich alle in frage kommenden links durchgehen, und schauen, ob der inhalt ihres href-attributes mit dem übereinstimmt, was die eigenschaften des location-objektes (oder ggf. auch document.URL) enthalten.
aber vorsicht: IIRC ergänzten manche browser bspw. das src-attribut von bildern mit zu einem kompletten URL, andere wiederum nicht. könnte(!) bei a.href ggf. ähnlich sein.

Das Problem hatte ich ja schon gelöst:
ich ändere die ID von meinem Listenfeld, da ich  das a-tag mit #ID a in CSS wiederum ansprechen kann , kann ich die visuellen Eigenschaften auch vis CSS ändern.
Nur einem a-tag die Fähigkeit Links auszuführen zu nehmen kann ich nicht.
Habe ich übrigens mit
document.getElementById("navi_link_a1").href = "";
versucht.
Da springt der Browser in die Verzeichnisstruktur.
Wie meintest du das mit dem href entfernen?

bydey

[Ashura]

Hallo dey.

Kann ich dem attribute a seine Fähigkeit zu verlinken wegnehmen?

Du kannst zuerst mittels node-Objekt den Textknoten innerhalb des a-Elementes auslesen und in eine Variable speichern.

Das Gleiche kannst du mit evtl. zu überführenden Attributen machen.

Dann ersetzt du das a-Element durch ein anderes Element (oder lässt diesen Schritt weg und fügst gleich den Textknoten ein, wobei du hier aber keine Attribute zuweisen kannst) und fügst deinen gespeicherten Text, sowie ggf. die Attribute ein.

Einen schönen Freitag noch.

Gruß, Ashura

[Struppi]

Kann ich dem attribute a seine Fähigkeit zu verlinken wegnehmen?

Ja

onclick="return false;"

Struppi.

[dey]

Hallo,

onclick="return false;"

Macht in meinem Fall so wieder keinen Sinn, da es meine Navigation nicht einheitlich über alle Seiten gestallten würde.
Aber, wenn man den Ansatz weiterspinnen würde und ich danach wiederum die ID auslese und in Abhängigkeit davon dann return false; wähle oder auch nicht würde ein Schuh daraus. ;oP

bydey