[Javascript] Element herstellen

[ZeroXT]

Beste mensen,

Ik probeer de originele staat van een element terug te zetten. Ik heb een div element die met mouseover een groene border krijgt. Op moment dat er een mouseout plaats vindt moet deze de originele staat (dus rode border) weer terug krijgen. Dat lukt met de onderstaande code:

JavaScript:

<div id="div" style="width:100px; height:100px; background:#000; border:10px solid green"></div>

<script type="application/javascript">
var div = document.getElementById('div');

original();

div.onmouseover = function()
{
    this.style.border = '10px solid red';
}

div.onmouseout = function()
{
    original();
}

function original()
{
    if(div.original)
    {
        div.parentNode.replaceChild(div.original, div);
        div.original = null;
    }
    else
    {
        div.original = div.cloneNode(true);
    }
}
</script>

Dit hoeft natuurlijk niet alleen met borders te zijn maar kan ook zijn met andere style attributen of de content van de div moet weer hersteld worden etc. anders had ik alleen de style opgeslagen en niet het hele element.

Echter ga ik er met mijn muis nogmaals overheen gebeurd er helemaal niets.

Ik kan hier geen bestaande library voor gebruiken omdat ik er zelf een aan maken ben voor de fun. Bovenstaande code is ook snel in elkaar gemaakt om het probleem na te bootsen. Dit is de daadwerkelijke code:

JavaScript:

$('div1').css({'border' : '10px solid red'}).origineel().bind('mouseover', function()
{
    this.css({'border' : '10px solid green'});
}).bind('mouseout', function()
{
    this.origineel();
});

Kan iemand mij helpen om dit probleem op te lossen?

[Acid_Burn]

Waarom doe je dat niet gewoon met css ipv javascript te gebruiken?

[R4gnax]

Gebruik CSS classes ipv inline CSS, daar zijn ze tenslotte voor.

Wil je dat niet, dan kun je eens kijken in de broncode van jQuery en jQuery UI, specifiek in de secties die animatie en effects behandelen. Ik kan je nu al verklappen dat dat een flinke bult code is.

[ZeroXT]

Dankje voor de replies maar zoals ik al zei; het gaat niet alleen om de css. de CSS in deze code was maar een voorbeeld. Ik wil gewoon een kopie kunnen maken en die later weer terug kunnen zetten.

[Acid_Burn]

Probleem is nu dat je een referentie maakt naar je element, geen kopie. Dus als je dan original aanroept vervang je het element met zichzelf.

Ik vind het trouwens een vreemde consructie om zo die original op te slaan. Is dat gangbaar?

[ Voor 25% gewijzigd door Acid_Burn op 11-05-2011 18:50 ]

[ZeroXT]

Of dat gangbaar is, weet ik niet maar welk stukje code bedoel je?

ik maak juist geen referentie want ik clone het element en vervang het daarna maar mijn mouseover gaat daarmee verloren, dus de events.

[pieturp]

Je gooit allerlei custom properties naar een DOM element. Da's Vies™
(Gebruik liever een eigen object / var / whatever)

Je gebruikt onmouseover en onmouseout properties van een DOM element i.p.v. nette eventHandlers. Da's weer Vies™
(zoek eens op "addEventListener")

Als je dan een replace van je element node doet, dan vind ik het niet raar dat je dingen gaat missen (eventHandlers of custom properties bijvoorbeeld).

Last but not least: verwijzingen naar functies doe je door naar de functie te verwijzen; niet door ze opnieuw aan te roepen:

JavaScript:

div.onmouseout = original;

Oftewel:

JavaScript:

yourDiv.addEventListener('mouseout', original, false);