Javascript Hover-Effekt entfernt vordefinierten Stil

Question

Ich verwende eine tutorial from Imar Spaanjaars' web site, um eine ganze Tabellenzeile klickbar und haben einen Hover-Effekt auch darauf. Sobald der Benutzer über die Tabellenzeile fährt, entfernt er die vordefinierte Hintergrundfarbe für diese Zeile. Ich möchte es so machen, dass es diesen Stil nicht überschreibt. Wie könnte ich das tun?

<script type="text/javascript"> 
    function ChangeColor(tableRow, highLight) 
    { 
    if (highLight) 
    { 
     tableRow.style.backgroundColor = '#dcfac9'; 
    } 
    else 
    { 
     tableRow.style.backgroundColor = 'white'; 
    } 
    } 

    function DoNav(theUrl) 
    { 
    document.location.href = theUrl; 
    } 
    </script> 

Wenn Sie irgendwelche besseren Vorschläge haben, um diese Aufgabe zu erfüllen, würde ich lieben, sie zu hören!

Mein TR-Tag hat ein bgcolor -Tag, das von meinem PHP gesetzt wird, wenn dieses bestimmte Poststück gelesen wurde oder nicht.

Answer 1

Wenn die ursprüngliche Hintergrundfarbe über ein Stylesheet oder (wie in Ihrem Fall) ein Legacy-Attribut bgcolor angegeben wird, können Sie einfach den Style für das Element löschen, wenn Sie fertig sind, und es wird zurückgesetzt:

function ChangeColor(tableRow, highLight) 
{ 
    if (highLight) 
    { 
    tableRow.style.backgroundColor = '#dcfac9'; 
    } 
    else 
    { 
    tableRow.style.backgroundColor = ''; 
    } 
} 

das heißt, würden Sie wahrscheinlich eine CSS-Klasse und die damit verbundenen Regeln besser dran mit dem markierten Zustand der Zeile darstellen und hinzufügen/entfernen, dass, wie Sie möchten:

tr { backgroundColor: <whatever> } 
tr.highlighted { backgroundColor: #dcfac9 } 

Dann wird Ihr Javascript wird

function ChangeColor(tableRow, highLight) { 
    if(highLight) 
    { 
     tableRow.className = 'highlighted'; 
    } 
    else 
    { 
     tableRow.className = ''; 
    } 
} 

Zusätzlich zu halten bestimmte Stile aus Ihrem Skript und Markup (wo sie schwierig wird, im Laufe der Zeit zu halten), auf diese Weise können Sie schweben Stile hinzufügen oder ändern (zum Beispiel fett gedruckten Text oder eine Grenze) ohne Hinzufügen von Komplexität zum Code.

Wenn Sie Zugriff auf eine Javascript-Bibliothek haben wie Prototype, Ext.js oder Dojo, dann können Sie ihre Klasse Bearbeitungsfunktionen verwenden, anstatt, die den Fall behandeln, wo Sie eine vorhandene Klassenname beibehalten möchten, oder verwenden, um mehrere Klassen für auf einem einzelnen Element.