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 = '';
    }
}

В дополнение к исключению определенных стилей из сценария и разметки (когда их становится сложно поддерживать с течением времени), это позволяет добавлять или изменять стили при наведении (например, полужирный текст или рамку) без добавления сложности к коду.

Если у вас есть доступ к библиотеке Javascript, такой как Prototype , Ext.js или Dojo , тогда вы можете использовать вместо этого их функции управления классами, которые будет обрабатывать случай, когда вы хотите сохранить существующее className или используете несколько классов для одного элемента.