суббота, 9 мая 2009 г.

Копирование стиля элемента в 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 и то, что смог найти в интернете, думаю, кому-то ещё пригодится, на работе уже сталкивались с такой проблемой.

Firebug для Internet Explorer, Opera, и Safari

Firebug – это мощное дополнение для исследования и отладки веб-страниц под Firefox.

Я, например, уже плохо представляю свою разработку web-приложений без такого полезного инструмента для отладки. Но, при написании кроссбраузерных приложений дело приходится иметь и с более глюкавым IE, быстрой Opera и популярным Safari браузерами. У каждого из них есть свои, заточенные инструментарии для отладки, но оказывается любимый Firebug можно прикрутить в каждый из браузеров.

Имя этому чуду Firebug lite. Это ни что иное, как JavaScript, включаемый на страницу. Сделать это можно, подключив js-файл, к примеру, в заголовке требуемой страницы:

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

После перезагрузки страницы вы увидите хорошо знакомую консоль firebug, которая поможет сэкономить вам много времени и нервов на вылизывании кроссбраузерного кода. Если вы отлаживаете веб-приложение локально и нет постоянного доступа к интернету, то вы можете скачать исходный код (есть и compressed js-файл) с официального сайта http://getfirebug.com/lite.html.

Рекоммендую

Попробуйте надёжный хостинг от Scala Hosting