Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Re(12): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Dr. Watson — Thu, 19 Aug 2004 11:50:27 GMT

Alles klar, wieder was gelernt, danke

Re(11): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Thu, 19 Aug 2004 07:25:25 GMT

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.

Re(10): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Thu, 19 Aug 2004 07:19:03 GMT

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...

Re(9): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Dr. Watson — Wed, 18 Aug 2004 14:56:30 GMT

Darf man die erfahren?

Re(8): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Wed, 18 Aug 2004 14:21:22 GMT

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

Re(7): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Dr. Watson — Wed, 18 Aug 2004 10:42:06 GMT

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

Re(6): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Wed, 18 Aug 2004 10:20:34 GMT

.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?!

Re(5): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Dr. Watson — Wed, 18 Aug 2004 10:11:19 GMT

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?

Re(4): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Wed, 18 Aug 2004 07:57:05 GMT

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

Re(3): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Dr. Watson — Tue, 17 Aug 2004 17:04:14 GMT

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?

Re(2): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Tue, 17 Aug 2004 16:49:08 GMT

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

Re: Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

Dr. Watson — Tue, 17 Aug 2004 12:44:20 GMT

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

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

Re(3): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

roye — Mon, 16 Aug 2004 17:43:53 GMT

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

Re(2): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Mon, 16 Aug 2004 16:40:46 GMT

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

Re(2): Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

roye — Mon, 16 Aug 2004 16:10:52 GMT

wobei das mit den geschweiften klammern nicht so toll war, da ich diese bei den funktionien auch verwende aber du schaffst das schon ...

Re: Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

roye — Mon, 16 Aug 2004 16:09:57 GMT

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!)

Javascript: Einem Objekt dynamisch das Stylesheet-Format neu zuweisen

RevX — Mon, 16 Aug 2004 14:42:42 GMT

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???