[Prototype / Scriptaculous]Switch tussen CSS properties

[van.der.schulting]

Tijdens een 'onclick' wil ik een CSS style property wijzigen.
Stel de CSS-property is:
list-style-image: url("1.png");

Die wil ik veranderen in:
list-style-image: url("2.png");

Als ik dan nog een keer klik moet ie terugveranderen in:
list-style-image: url("1.png");
etc. etc.

Ik kan het maar niet vinden hoe dat moet in Scriptaculous en Prototype. Ik heb het geprobeerd met Effect.morph, maar die kan maar eenmalig veranderen net zoals Element.toggleClassName.

Wie weet hoe ik een CSS property 'om-en-om' kan wijzigen?

[BtM909]

En wat dacht je ervan om dit voorbeeldje verder uit te werken: http://www.prototypejs.org/api/element/toggleClassName.

Hou er rekening mee dat prototype geen vervanging van de taal Javascript is

[ Voor 26% gewijzigd door BtM909 op 19-02-2009 15:14 ]

[Killemov]

Met javascript? Voor zover ik weet zitten er geen css-style-switch functies in prototype/scriptaculous, dus dat zul je zelf moeten doen. Gewoon een boolean toggle bijhouden. Wat meer gebruikelijk is het veranderen van de class. Je kunt dan ook beslissingen laten nemen op basis van de huidige class.

[van.der.schulting]

BtM909 schreef op donderdag 19 februari 2009 @ 15:12:
En wat dacht je ervan om dit voorbeeldje verder uit te werken: http://www.prototypejs.org/api/element/toggleClassName.

Hou er rekening mee dat prototype geen vervanging van de taal Javascript is

Probleem is dat dat alleen werkt op 'div' en ik moet natuurlijk de klasse kunnen setten van de 'li'.

Om de list-style-image te wijzigen moet ik nl. het element li aanspreken.

[Da Weef]

Cascading Stylesheet:

.ClassName li {
list-style-image: url("2.png");
}

??

Javascriptoplossing is denk ik mooier, maar dit moet toch gewoon werken?

[ Voor 32% gewijzigd door Da Weef op 19-02-2009 16:55 ]

[mcDavid]

Hoe je dat met zo'n framework doet weet ik niet... maar korter dan this.style.listStyleImage kan volgens mij haast niet.

[Rowanov]

Je kan die functie op elk element gebruiken. De simpelste oplossing is het maken van twee klasses en dan met hasClassName te checken of hij de klasse heeft die je wilt, zo nee, dan verander je die met toggleClassName. Vervolgens zet je in css de eigenschappen van het element met de klasse in beide toestanden.