Кроссбраузерное присваивание значения для атрибута style
Всем конечно известно, что в ИЕ до восьмой версии не работает присваивание значения атрибуту style через element.setAttribute();.
Однако присваивание атрибутов по отдельности через запись вида: element.style.name = "value" совершенно отлично работает в любом браузере. Стоит только учитывать, что имена свойств, которые пишутся через дефис, надо конвертировать в «верблюжий стиль» с малой буквы. Так свойство margin-left следует записывать как marginLeft. Однако правило работает не всегда. Так свойство float, хоть и не содержит дефиса и состоит из одного слова, следует писать как cssFloat или styleFloat.
В общем виде, функцию для присваивания значения атрибуту style можно написать следующим образом:
// создаём елемент
var wrap = document.createElement('div');
// вызываем функцию присваивания значения
setStyle(wrap, "position:fixed;top:50%;left:50%;display:block;");
// собственно функция
function setStyle(el, style) {
style = style.split(';'); // разбиваем на массив значений
for (var i in style) {
if (style[i] !== "") { // если значение нет (конец строки)
var attr = style[i].split(':'); // конкретное значение
// если есть дефис в значении свойства, преобразуем значение
if (attr[0].indexOf('-') != -1) {
attr[0] = attr[0].replace(/-\D/g, attr[0].charAt(attr[0].indexOf('-') + 1).toUpperCase());
}
// задаём значение
el.style[attr[0]] = attr[1];
}
}
}
С присваиванием float пока не знаю что делать. Стараюсь его избегать.
Дополнение: конструкция element.setAttribute(); очень замечательно заменяется конструкцией element.style.cssText = 'css prop';.
