Javascriptのホバーエフェクトは、あらかじめ定義されたスタイルを削除します

Question

私はtutorial from Imar Spaanjaars' web siteを使用して、テーブル行全体をクリック可能にし、その上にホバー効果をもたせます。ユーザーがテーブル行を移動すると、その行の事前定義された背景色が削除されます。私はこのスタイルを上書きしないようにしたい。どうすればいい？

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

このタスクを達成するためのより良い提案があれば、私はそれらを聞いてみたいです！

私のtrタグには、特定のメールが読み込まれているかどうかにかかわらず、phgによって設定されたbgcolorタグがあります。

Answer 1

オリジナルの背景色がスタイルシートまたは（あなたの場合のように）従来のbgcolor属性で指定されている場合は、完了したらその要素のスタイルをクリアするだけで済みます。

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

次に、あなたのJavascriptを：あなたはおそらく、行の強調表示状態を表して、あなたが好きなようにすることを追加/削除するCSSクラスと関連付けられているルールを使用したほうが良いだろう、と述べた

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

01になりますスクリプト と（彼らは時間をかけて維持することが困難になる）マークアップのうち、特定のスタイルを維持することに加え

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

が、これはあなたがすることなく、ホバースタイル（例えば、太字テキスト、または境界）を追加または変更することができますコードに複雑さが増します。あなたはJavaScriptライブラリのようなPrototype、Ext.jsまたはDojoへのアクセス権を持っている場合は

、そしてあなたは、既存のクラス名を残したい、またはのために複数のクラスを使用しているケースを扱うなる、代わりにそのクラスの操作機能を使用することができます単一の要素に