mehrere klassen mit javascript manipulieren

[òle]

hi, ich hab mal geschlossen mich mit Javascript zu befassen und habe folgendes konstrukt gebaut:

CSS:
.blue{ background-color:blue; }
/* zustände */
.open{height:100px;}
.closed{height:20px;}

Javascript:
function mark(cell){ cell.className="open"; }
function unmark(cell) { cell.className="closed"; }

HTML:
<div class="blue" onMouseOver="mark(this)" OnMouseOut="unmark(this)">Test</div>
<div class="blue" onMouseOver="mark(this)" onMouseOut="unmark(this)">Test2</div>
<div class="blue" onMouseOver="mark(this)" onMouseOut="unmark(this)">Test3</div>

jetzt ändert js also beim drüberrollen:

class="blue"

um, in:

class="open"

ich möchte jedoch das der aktuellen klasse, die open klasse lediglich hinzugefügt wird, also:

class="blue open"

wie geht sowas?
lg
òle

[jonas dinkelmann]

Hy òle,

meinst du sowas:
cell.className = cell.className + " open"

Gruss Jonas

[òle]

Hy òle,

meinst du sowas:
cell.className = cell.className + " open"

Gruss Jonas

Wundervoll, ich hab jetzt einfach mal naiverweise mein script so umgeschireben:

function mark(cell){ cell.className = cell.className + " open"; }
function unmark(cell){ cell.className = cell.className - " open"; }

die erste zeile funst auch super. bei der zweiten zeile ist er der meinung className sei ein integer. wenn man wieder rausfährt ändert sich also die klasse auf NaN. ich müsste also den string nach der zeichenkette " open" durchsuchen und diesen teil dann löschen... ka wie^^

[jonas dinkelmann]

ich müsste also den string nach der zeichenkette " open" durchsuchen und diesen teil dann löschen... ka wie^^

Wie Tina schon geschrieben hat:
function unmark(cell) { cell.className=cell.className.replace(/ ?open/,' closed'); }

Gruss Jonas

[òle]

Wie Tina schon geschrieben hat:
function unmark(cell) { cell.className=cell.className.replace(/ ?open/,' closed'); }

vielen dank, ich denke damit kann ich was anfangen cya :)

lg
òle

[Steffen Bruchmann]

Hallo ,

Javascript:
function mark(cell){ cell.className="open"; }
function unmark(cell) { cell.className="closed"; }

[...] jetzt ändert js also beim drüberrollen:

class="blue"

um, in:

class="open"

ich möchte jedoch das der aktuellen klasse, die open klasse lediglich hinzugefügt wird, also:

class="blue open"

wie geht sowas?

Du willst nicht die Klasse ändern, sondern nur eine neue hinzufügen:

function mark (cell)  
{  
    cell.className += ' open';  
}

Mit freundlichen Grüßen,
Steffen Bruchmann

[Tina]

probier mal folgendes:

function mark(cell){ cell.className+=" open"; }
function unmark(cell) { cell.className=cell.className.replace(/ ?open/,' closed'); }

in der funktion unmark() wird dann der Teil " open" aus dem Klassennamen entfernt und durch " closed" ersetzt.

Einfacher gehts aber so:

CSS:
div { background-color:blue; height: 20px;}
.open {height: 100px;}

jetzt musst Du nämlich nur die klasse open zuweisen und wieder wegnehmen.
Davon abgesehen sollte man CSS-Klassen nicht mit "blue" benennen. Wenn nämlich mal die Farbe rot sein soll passt der Name nicht mehr. Vielmehr sollte man sich semantischen Bezeichnungen überlegen.

Gruß
Tina