Копирование стиля элемента в JavaScript

Может такое случиться, что понадобится скопировать часть атрибутов одного элемента в другой. «Что тут такого сложного?!», – подумаете вы, но решение такой задачи не тривиальное, как может показаться с первого взгляда.

Internet Explorer 7 и некоторые другие не могут установить значение стиля, класса или хендлера событий используя метод setAttribute. В IE8 вроде бы исправили это, но всё равно нельзя устанавливать обработчики событий. Некоторые браузеры имеют проблемы и со считыванием через getAttribute. В частности, Internet Explorer возвращает результат неправильного типа, например, вместо объекта строку, при использовании getAttribute для получения этих атрибутов. DOM обеспечивает несколько альтернативных решений для выполнения этих задач в такиз браузерах.

Класс доступен для чтения/записи через строку className.

Аттрибут обработчика события доступен через ссылку на функцию,с именем, совпадающем с именем атрибута, к примеру, element.onclick. Он доступен для чтения и записи, но запись должна происходить как ссылка на функцию, а не как прямая строка. Аттрибут можно записать используя конструктор функции:

element.onclick = new Function(codeAsAString);

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

var functioncode = element.onclick.toString();

Значение атрибута style доступно для чтения и записи через строку cssText, которая является свойством стиля объекта, которая в свою очередь является свойством элемента. Это свойство может плохо поддерживаться старыми браузерами, к примеру, Safari не поддерживал его вплоть до версии 1.1. Поэтому для избежания проблем стоит использовать комбинацию cssText и getAttribute/setAttribute. Для чтения:

var cssString;
cssString = element.style.cssText;
if( typeof(cssString) != 'string' ) {
 cssString = element.getAttribute('style');
}

Для записи атрибута style лучше использовать оба метода, а браузер уже сам выставит тем методом, который в нём отработает правильно:

var cssString = 'color:lime;font-weight:bold;';
element.style.cssText = cssString;
element.setAttribute('style',cssString);

Вот вроде бы и всё, что хотел рассказать по поводу копирования атрибутов средствами JavaScript и то, что смог найти в интернете, думаю, кому-то ещё пригодится, на работе уже сталкивались с такой проблемой.