Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen (17 Beiträge, 94 Mal gelesen)

Du bist nicht angemeldet. [ Login/Registrieren ]

Ich habe drei (Pseudo-)Buttons in blau (definiert als Links die eine
Table cell beinhalten). Fahre ich mit der Maus über irgendeine Tabellen-
zelle, ändert sich deren Farbe (laut Definition in einem Stylesheet).
Wenn ich jetzt auf eine Tabellenzelle klicke, möchte ich, dass diese
die Farbe der "onMouseOver-Farbe" annimmt, und die anderen 2 Tabellen-
zellen eine andere Farbe annehmen.

Wie kann ich also mit Javascript ein bestimmtes Format (oder Rule)
einer Stylesheet-Deklaration gezielt auf ein bestimmtes Objekt anwenden?

Ich habe sowas wie folgt probiert (innerhalb einer Funktion die per
onClick getriggert wird):

document.getElementById('tabzelle1').style = "oncell";
// oncell ist eine Stylesheet-Rule

Das hat (natürlich) nicht funktioniert, aber wie geht's wirklich???

folgendes skript sollte helfen die antwort zu finden:

{SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"}
{!--
var temp
var obj1 = document.getElementById('tabzelle1')
var obj2 = obj1.style
for(var i in obj1) {
temp += i + "=" + obj1[i] + "{br}\n"
}
temp += "{hr}\n"
for(var i in obj2) {
temp += i + "=" + obj2[i] + "{br}\n"
}
document.write(temp)
//--}
{/SCRIPT}

lösung also:
document.getElementById('tabzelle1').className = "oncell"

(geschweifte klammern durch spitze klammern ersetzen!)

wobei das mit den geschweiften klammern nicht so toll war, da ich diese bei den funktionien auch verwende

aber du schaffst das schon ...

Danke erstmal! Aber wie kann ich "lösung also" verstehen, wenn du im javascript code selbst .className nicht verwendet hast?

schau dir die ausgabe von dem code schnipsel oben an, dann siehst du alle unterobjekte mit inhalten des objektes ... und irgendwo kommt dann "className" darin vor. zum testen zum beispiel [span id="tabzelle1" class="dieseninhaltversucheichzuaendern"]test[/span]. danach das script durchlaufen und den output nach "dieseninhaltversucheichzuaendern" durchsuchen. ergebnis wird "className" sein

document.getElementById('tabzelle1').style ist der direkte style.

versuchs mal mit document.getElementById('tabzelle1').class

Ähmm... ist das nur eine Vermutung von dir oder gibt's in den Weiten des Internet auch irgendwo eine Beschreibung dazu?

Es ist zwar nur eine Vermutung, weil ich nicht extra nachsehn will, aber müsste eigentlich funktionieren.

Per Html weißt du einem Objekt ja auch die Klasse mit <td class="soundso"> zu.
Style-Definitionen hingegen per <td style="border: 1px solid #000000;">.

Das wird per Javascript nicht anders sein.
document.getElementById('tabzelle1').style kannst du also nur direkt css code zuweisen, z.b. document.getElementById('tabzelle1').style = "border: 1px solid #000000;";.
document.getElementById('tabzelle1').class hingegen kannst du eine klasse zuweisen, z.b. document.getElementById('tabzelle1').class = "oncell";

Alles klar?

Klar schon. Aber funktionieren tut's nicht. Ein .class Property ist auch nirgends erwähnt...

Sorry hab mich geirrt.
Hab jetzt nochmals nachgesehn, die Eigenschaft heißt .className

Sowas is ne Sache von 10 Sekunden google
http://de.selfhtml.org/javascript/objekte/all.htm#class_name

Warum schaffst du das nicht selbst?

.className wusste ich eh, da das bereits in
http://forum.geizhals.at/t270301,1700139.html#1700139
gepostet wurde!

Ich habe gedacht, du hättest einen neuen Vorschlag?!

Diesen Teil des Themas hab ich nicht gelesen.
Aber jetzt hast du ja schon deine Lösung, sollte doch alles klar sein.

Yup. Ich hab sogar eine noch etwas durchsichtigere Lösung finden können...

Darf man die erfahren?

Ich habe jetzt zwar die einzelnen Variablen/Attribute nicht ganz so wie im Vorzeigebeispiel, aber folgendermaßen geht's ungefähr:

function helper1(obj)
{
    if (obj.getAttribute("active")==true)
    {
        obj.className="onrowselected";
        document.getElementById('menu1').setAttribute('active', false);
        document.getElementById('menu1').className="row";
    }
    else
        obj.className="row";
}

function helper4(obj)
{
    if (obj.getAttribute("active")==true)
        obj.className="onrowselected";
    else
        obj.className="onrow";
}

und

[td class="row" id="templatemenu" onMouseOver='helper4(this)' onMouseOut='helper1(this)' align="center"] (spitze statt eckige Klammern)

wobei "row" Normalzustand ist, "onrow" wenn die Maus drüber ist, und "onrowselected" wenn gedrückt wurde.

Mit diesen 2 Javascriptfunktionen und den properties .setAttribute und .getAttribute (und einem "virtuellen" Attribut - hier:"active" - kann man das Problem relativ unkompliziert lösen...

Zusätzlich habe ich noch in dem [A href=..] (der das TD tag umgibt) einen onClick-Aufruf drinnen, der den entsprechenden Style aktiviert. Aber der Kern der Lösung ist .setAttribute und .getAttribute.

Alles klar, wieder was gelernt, danke

Dieses Forum ist eine frei zugängliche Diskussionsplattform.
Der Betreiber übernimmt keine Verantwortung für den Inhalt der Beiträge und behält sich das Recht vor, Beiträge mit rechtswidrigem oder anstößigem Inhalt zu löschen.
Datenschutzerklärung