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

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

Я работаю над быстрым исправлением при сортировке с помощью javascript на стороне клиента. У меня уже есть script, который в основном делает то, что мне нужно. Однако мне еще нужно добавить один бит функциональности. Строки таблицы на этих страницах часто имеют чередующиеся цвета строк, а механизм, используемый для достижения этого, варьируется между страницами. Это может быть так же просто, как изменение класса CSS, или стили, возможно, были сделаны inline с помощью кода 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, разрешено здесь - из моих рук.

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

Ответ 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.

Ответ 2

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

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

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

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

Ответ 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 */ }
}

Ответ 4

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

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

Ответ 5

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

Ответ 6

Не устанавливайте сам объект стиля, задайте свойство цвета фона объекта стиля, являющегося свойством элемента.

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

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

Ответ 7

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

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