JavaScript懸停效果刪除了預定義的樣式

Question

我正在使用Imar Spaanjaars網站上的教程來使整個表格行都可單擊，並對其具有懸停效果。 用戶將鼠標懸停在表格行上方時，它將刪除該行的預定義背景色。 我要制作它，以便它不會覆蓋此樣式。 我該怎么辦？

    <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標簽中有一個bgcolor標簽，由我的php設置，如果該特定郵件已被讀取或未讀取。

Answer 1

如果通過樣式表或舊的bgcolor屬性指定了原始背景色，則只需在完成操作后清除元素上的樣式，然后它將還原：

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

也就是說，最好使用CSS類和關聯的規則來表示行的突出顯示狀態，並根據需要添加/刪除該狀態：

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

然后你的JavaScript變成

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

除了將特定樣式保留在腳本和標記之外（隨着時間的推移它們將變得難以維護），這還使您可以添加或更改懸停樣式（例如，粗體文本或邊框），而不會增加代碼的復雜性。

如果您可以訪問Prototype ， Ext.js或Dojo之類的Javascript庫，則可以改用它們的類操作函數，該函數可以處理要保留現有className的情況，或者在一個上使用多個類的情況。單個元素。