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的情况，或者在一个上使用多个类的情况。单个元素。