Создание сайта, дизайн, web дизайн
Главная Работы Услуги Цены Контакты

 Главная
 Работы
 Услуги
 Цены
 Контакты
 

При помощи DOM в браузерах категории “А” можно делать множество простых (и некоторое количество сложных) штук довольно просто. Такие вещи как добавление или удаление элементов, вставку HTML текста, обработку событий вполне легко можно сделать кросс-браузерной. Конечно, есть небльшие различия в реализации, которые надо подгонять в каждом конкретном случае, но всё-таки в большинстве своём всё работает так, как и должно. Всё, за исключением динамического добавления стилей на страницу.


Когда мы пишем HTML, мы можем добавить стили, например, следующим образом:

<style type="text/css">
  a {
    color: red;
  }
</style>

Этот блок текста может быть вставлен в любое место на странице, и эти правила применятся ко всей странице. С тех пор как у нас появился DOM API, который позволяет динамически создавать элементы, атрибуты и текстовые узлы (nodes), можно придти к выводу, что предыдущий блок стилевых правил может быть создан при помощи следующего кода:

var styleElement = document.createElement("style");
styleElement.type = "text/css";
styleElement.appendChild(document.createTextNode("a { color: red; }"));
document.body.appendChild(styleElement);Вроде бы кажется, что всё просто… а вот и нет! В Opera и Firefox, претендующих на звание браузеров с хорошей поддержкой стандартов, это работает превосходно, а вот в IE и в Safari — нет, хотя и по разным причинам.

Safari требует, чтобы элемент <style> находился внутри элемента <head>, что можно легко устроить внеся небольшие изменения в предыдущий код:

var styleElement = document.createElement("style");
styleElement.type = "text/css";
styleElement.appendChild(document.createTextNode("a { color: red; }"));
document.getElementsByTagName("head")[0].appendChild(styleElement);Этот код теперь работает в браузерах Opera, Firefox и Safari. А что же с IE? Когда IE пытается выполнить style.appendChild() он выдаёт сообщение об ошибке, которое не особо-то помогает: “unexpected call to method or property access”. Если заменить это на вызов установки innerHTML, получим также бессмысленное сообщение “unknown runtime error”. В чём же дело?

А дело в том, что IE не позволяет работать с элементом <style> подобным образом. Но, в то же время, в IE есть другой способ сделать тоже самое. IE поддерживает свойство styleSheet, которе позволяет управлять стилями. У свойства styleSheet есть свойство cssText, котрое используется для установки или чтения CSS для указанного стилевого элемента. Таким образом, для того чтобы всё заработало в IE, нам необходимо внести в код следующие изменения:

var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
  styleElement.styleSheet.cssText = "a { color: red }";
} else {
  styleElement.appendChild(document.createTextNode("a { color: red; }"));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);Теперь этот код работает во всех основных браузерах и его можно завернуть в функцию:

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}Используя эту функцию, можно добавлять неограниченное число стилевых элементов.

Внимание! IE позволяет записывать значение в параметр styleSheet.cssText лишь один раз для кажого элемента <style>. Если вы попытаетесь произвести запись более чем один раз, это может “повалить” браузер. Так что, лучше не переиспользовать <style>-элементы на странице. Вместо этого лучше их удалять или просто добавлять новые.

 

Афоризм дня:
Говорите правду - и вы будете оригинальны.
А.В. Вампилов
© 2004-2017 LABDESIGN.RU   e-mail: