XaraX: ID mit Javascript wechseln

Beitrag lesen

Frohe Ostern Robert,

Für die Gestaltung dynamischer Elemente mit CSS suche ich ein Skript, das die ID eines Objekts durch Klick auf einen Link austauscht.

Prinzipiell ist die ID eines Elementes in neueren Browsern änderbar.
http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften
Folgendes würde also Deine Vorstellungen durchaus umsetzen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>...</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <style type="text/css">
   #text  {background:red}
   #keintext {background:green}
  </style>
 </head>
 <body>
  <p id="text" onmouseover="alert(this.id)" onclick="this.id='keintext'">
  der Text
  </p>
 </body>
</html>

Inwiefern das auf alle JS-interpretierenden Browsern zutrifft, kann ich Dir nicht sagen. Da auch document.getElementById('text').className in neueren Browsern funktioniert, würde ich bei der Wahl zwischen ID / className auch zu className tendieren.

Das Skript sollte wie ein Schalter funktionieren: Beim ersten Click wird die ID ersetzt (z.B "navigation" > "navigation1"), beim zweiten wieder zurück getauscht ("navigation1" > "navigation") usw.

Generell würde ich Deinem Problem aber mit dem Aufruf einer Funktion und ohne ID oder className arbeiten:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>...</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <script type="text/javascript">
   function anders(v)
    {
    if(v.style.backgroundColor=="red") v.style.backgroundColor="blue"
    else     v.style.backgroundColor="red"
    }
  </script>
 </head>
 <body>
  <p onMouseover="anders(this)" onMouseout="anders(this)">
  der Text
  </p>
 </body>
</html>

Gruß aus Berlin!
eddi