Установить свойство стиля HTML-элемента в JavaScript

Question

У меня есть куча старых классических ASP-страниц, многие из которых показывают данные базы данных в таблицах. Ни на одной из страниц нет встроенной функции сортировки: вы находитесь в зависимости от любого предложения ORDER BY, которое оригинальный разработчик счел нужным использовать.

Я работаю над быстрым решением проблемы сортировки с помощью клиентского JavaScript. У меня уже есть сценарий, который в основном делает то, что мне нужно. Тем не менее, мне все еще нужно добавить один бит функциональности. Строки таблицы на этих страницах часто будут иметь чередующиеся цвета строк, и механизм, используемый для этого, различается на разных страницах. Это может быть так же просто, как изменение класса CSS, или стили могут быть встроены в код ASP.

Прямо сейчас после сортировки таблицы в каждой строке сохраняется схема раскраски, поэтому чередующиеся строки больше не чередуются. Я надеялся исправить это с помощью чего-то простого:

/* "table" is a var for the table element I'm sorting.
   I've already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

К сожалению, вы не можете просто установить свойство стиля элемента следующим образом. Он жалуется, что у объекта нет сеттера. Как еще я могу сделать это просто? Здесь не разрешено использование таких фреймворков, как jQuery - это не в моих руках.

Обновление:
Хотя это было бы лучшим решением, просто нецелесообразно проводить рефакторинг более 100 страниц для всех классов, а не для встроенного стиля. Кроме того, иногда это связано не только с цветом фона. Например, ряд может быть намного темнее или светлее, чем чередующийся ряд, при этом один стиль также имеет другой цвет переднего плана для размещения. Или альтернативный стиль может устанавливать границы по-разному. Я действительно не знаю, что используется на всех этих страницах, поэтому мне нужно что-то, что в общем случае применило бы все стилей из одной строки в другую.

Answer 1

Вы можете попробовать захватить cssText и className.

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

Однако не совсем уверен в совместимости браузера с cssText.

Answer 2

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

//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);

Обратите внимание, что в IE8 в стандартном режиме работает первый способ.

Answer 3

Для меня это работает:

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don't care */ }
}

Answer 4

Элемент DOM style"property" - это коллекция только для чтения всех атрибутов стиля, определенных для элемента. (Свойство коллекции доступно только для чтения, необязательно для элементов в коллекции.)

Было бы лучше использовать "свойство" className для элементов.

Answer 5

Я хотел бы отметить, что обычно предпочтительнее изменить класс узла вместо его стиля и позволить CSS обрабатывать то, что это значит.

Answer 6

Если вы просто хотите изменить цвет строки, вы можете просто получить доступ к свойству style.backgroundColor и установить его.

Здесь - быстрая ссылка на свойство CSS для преобразования JS.

Answer 7

Не устанавливайте сам объект стиля, установите свойство background color для объекта style, который является свойством элемента.

И да, даже если вы сказали нет, jquery и tablesorter с его плагином с полоской зебры могут сделать все это за вас в 3 строчки кода.

И просто установка атрибута class будет лучше, так как тогда вы будете иметь не жестко запрограммированный контроль над стилем, который более организован