Per Script auf das Attribut:className zugreifen.

[Sebastian]

Hallo,

ich versuche nun schon seit geraumer Zeit über eine kleine Funktion,
die ich mir bei quirksmode.com geholt habe,
einen Klassennamen dynamisch zu verändern.

Irgendwie haut das aber nicht hin!

var DHTML = (document.getElementById || document.all || document.layers);

function showtime(flag)
{
if (!DHTML) return;
var one = new getObj('hideright');
// one.style.display = (flag) ? 'none' : 'block';
one.className = (flag) ? 'hideit' : 'showit';

}

// DHTML micro API by www.quirksmode.com

function getObj(name)
{

if (document.getElementById)
  {
   this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
this.obj = document.all[name];
this.style = document.all[name].style;
  }

}

Der auskommentierte Part oben funktioniert einwandfrei!

Ich rufe das Ganze folgendermaßen auf:
<a href="#nirgendwo" onmouseover="javascript:showtime(0);" onmouseout="javascript:showtime(1);" title="ein Osterei"><span>Osterei</span></a>

Kann mir jemand sagen was ich flasch mache?

Freundliche Grüße aus Bremen,
Sebastian

[wahsaga]

hi,

Der auskommentierte Part oben funktioniert einwandfrei!

das ist klar - this.style wird ja auch im objekt getObj() definiert, also kann auf darunterliegende eigenschaften wie display zugegriffen werden.

className liegt allerdings direkt unterhalb des objektnode - nur dein objekt getObj() zeigt überhaupt nicht auf diesen.
this.obj allerdings schon - also müsste es auch one.obj.className heißen.

oder, alternativ, im objekt selber gleich
this = document.getElementById(name);
bzw.
this.obj = document.all[name];
setzen - und auf das this.style kann dann auch ganz verzichtet werden, wenn this selber auf den node zeigt.

gruß,
wahsaga

[molily]

Hallo,

kleine Ergänzung:

oder, alternativ, im objekt selber gleich
this = document.getElementById(name);

Wenn das ginge, hätte es ppk so gelöst. Man kann nicht this auf die linke Seite einer Zuweisung stellen, das hieße hier, im Konstruktor des Objekts das Objekt gleich zu überschreiben.
Mir ist sowieso unklar, warum hier ein Konstruktor benutzt wird und keine einfache Funktion, die mit getObj('hideright') aufgerufen wird. Die könnte ebenfalls ein Object zurückgeben, wenn man es unbedingt möchte. Das umständliche Splitten des Elementobjekts und des style-Objekts ist übrigens nur für Netscape 4 nötig (komplette Version). Den Teil hat Sebastian aber sowieso herausgenommen, daher fällt der Grund weg. So kämen wir auf eine ganz simple Funktion:

function getObj (id) {
  if (document.getElementById) {
    return document.getElementById(id);
  } else if (document.all) {
    return document.all[id];
  }
}
var one = getObj('hideright');

Mathias

[Sebastian]

Hallo Mathias,

auch dir ein Dankeschön!

in deinem Fall sieht die Lösung nun so aus:

function getObj (id) {
  if (document.getElementById) {
    return document.getElementById(id);
  } else if (document.all) {
    return document.all[id];
  }
}

var DHTML = (document.getElementById || document.all || document.layers);

function showtime(flag)
{
if (!DHTML) return;

var one = getObj('hideright');
one.className = (flag) ? 'hideit' : 'showit';

}

Das Script ist wirklich sehr kompakt. Es ist jetzt "glaube ich" nicht mehr ganz so flexibel wie die vorherige Lösung, doch erfüllt seinen Zweck!

Freundliche Grüße,
Sebastian

[wahsaga]

hi,

Wenn das ginge, hätte es ppk so gelöst. Man kann nicht this auf die linke Seite einer Zuweisung stellen, das hieße hier, im Konstruktor des Objekts das Objekt gleich zu überschreiben.

danke für die korrektur.
ist natürlich logisch, wenn man's genauer bedenkt :-)

gruß,
wahsaga

[Sebastian]

Hallo wahsaga,

• also müsste es auch one.obj.className heißen.

Ich habe es ausprobiert und es  funktioniert! Vielen Dank!
Die Geschichte mit dem Node, Child und so weiter habe ich noch nicht richtig gecheckt, denn ich habe bis jetzt den Aufwand gescheut, mich wirklich eingehend damit zu befassen.
Deswegen verstehe ich teilweis auch nur Bahnhof, wenn Ihr von diesen Dingen sprecht.

Da ich aber immer wieder mit dieser Thematik zutun habe, werde ich mir wohl mal die Zeit nehmen müssen, um etwas tiefer in die Materie einzusteigen. (Das lässt mein Designerherz nicht gerade höher schlagen!)

Auf der anderen Seite macht es echt Spaß, wenn es dann mal funktioniert und ich bin immer wieder von den Möglichkeiten fasziniert!

Die Lösung sieht nun folgendermaßen aus:

var DHTML = (document.getElementById || document.all || document.layers);

function showtime(flag)
{
if (!DHTML) return;
var one = new getObj('hideright');
one.obj.className = (flag) ? 'hideit' : 'showit';

}

// DHTML micro API by www.quirksmode.com

function getObj(name)
{

if (document.getElementById)
  {
   this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
this.obj = document.all[name];
this.style = document.all[name].style;
  }

}

Mir erscheint sie sehr sauber.  Die Zeilen für den Zugriff auf den Style des Objekts lasse ich mal drin, denn damit behalte ich die Möglichkeit diesen direkt zu beeinflussen.

Freundliche Grüße,
Sebastian