Javascript悬停效果删除预定义的样式

Javascript悬停效果删除预定义的样式,javascript,coding-style,Javascript,Coding Style,我使用了一个按钮,使整个表格行可以点击,并对其具有悬停效果。一旦用户将鼠标悬停在表格行上,它将删除该行的预定义背景色。我想让它不会覆盖这种风格。我该怎么做 <script type="text/javascript"> function ChangeColor(tableRow, highLight) { if (highLight) { tableRow.style.backgroundColor = '#dcfac9';

我使用了一个按钮,使整个表格行可以点击,并对其具有悬停效果。一旦用户将鼠标悬停在表格行上,它将删除该行的预定义背景色。我想让它不会覆盖这种风格。我该怎么做

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

函数ChangeColor(表格行,高亮显示)
{
如果(突出显示)
{
tableRow.style.backgroundColor='#dcfac9';
}
其他的
{
tableRow.style.backgroundColor='白色';
}
}
函数DoNav(theUrl)
{
document.location.href=URL;
}
如果你有更好的建议来完成这项任务,我很乐意听到


我的tr标签中有一个bgcolor标签,它由我的php设置,前提是特定的邮件是否已被读取

如果原始背景颜色是通过样式表或(在您的案例中)传统
bgcolor
属性指定的,那么您可以在完成后清除元素上的样式,它将恢复:

function ChangeColor(tableRow, highLight)
{
  if (highLight)
  {
    tableRow.style.backgroundColor = '#dcfac9';
  }
  else
  {
    tableRow.style.backgroundColor = '';
  }
}
也就是说,您最好使用CSS类和关联规则来表示行的突出显示状态,并根据需要添加/删除:

tr { backgroundColor: <whatever> }
tr.highlighted { backgroundColor: #dcfac9 }
除了将特定样式保留在脚本和标记之外(随着时间的推移,它们变得难以维护),这还允许添加或更改悬停样式(例如,粗体文本或边框),而不会增加代码的复杂性


如果您可以访问Javascript库,例如,或,则可以使用它们的类操纵函数,这将处理您希望保留现有类名或在单个元素上使用多个类的情况。

如果原始背景颜色是通过样式表或指定的(如您的情况)一个遗留的
bgcolor
属性,然后您可以在完成后清除元素上的样式,它将恢复:

function ChangeColor(tableRow, highLight)
{
  if (highLight)
  {
    tableRow.style.backgroundColor = '#dcfac9';
  }
  else
  {
    tableRow.style.backgroundColor = '';
  }
}
也就是说,您最好使用CSS类和关联规则来表示行的突出显示状态,并根据需要添加/删除:

tr { backgroundColor: <whatever> }
tr.highlighted { backgroundColor: #dcfac9 }
除了将特定样式保留在脚本和标记之外(随着时间的推移,它们变得难以维护),这还允许添加或更改悬停样式(例如,粗体文本或边框),而不会增加代码的复杂性


如果您可以访问Javascript库,例如,或,那么您可以使用它们的类操纵函数,这将处理您希望保留现有类名的情况,或者在单个元素上使用多个类的情况。

@Rick:事实上,我更喜欢您的类操纵函数-以我的经验,在代码中加入原始样式值只会引起以后的麻烦;您的样式表建议更可取。我已经合并了这两个,以供参考,根据您的需要进行编辑。第一个示例已经成功。我可以发誓我以前试过,但我想不会。瑞克,谢谢你的帮助!谢谢你,肖格@Shog9:我想我更喜欢你的b/c,它更直接地回答了问题。不过,我/确实/更喜欢使用类而不是手工编码的样式。直接更改类名也不是一个好的专业技能,因为对象可能附加了其他类。使用像“addClass”和“removeClass”这样的函数将是更好的解决方案;)是的,这就是为什么我建议使用JS库来进行类操作(因为addClass和removeClass不是JS中内置的,AFAIK)。@Rick:实际上我更喜欢你的库——以我的经验,在代码中加入原始样式值只会让你以后头疼;您的样式表建议更可取。我已经合并了这两个,以供参考,根据您的需要进行编辑。第一个示例已经成功。我可以发誓我以前试过,但我想不会。瑞克,谢谢你的帮助!谢谢你,肖格@Shog9:我想我更喜欢你的b/c,它更直接地回答了问题。不过,我/确实/更喜欢使用类而不是手工编码的样式。直接更改类名也不是一个好的专业技能,因为对象可能附加了其他类。使用像“addClass”和“removeClass”这样的函数将是更好的解决方案;)是的,这就是为什么我建议使用JS库进行类操作(因为addClass和removeClass不是JS内置的,AFAIK)。