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的情况,或者使用多个类来处理单个元素.