Loading
Красноглазым Джедаям
компьютерной вселенной
посвящается.

Динамическое управление стилями

Доступ к созданию и изменению стилей документа можно получить, используя DOM. Причем есть два способа решения этой проблемы. Первый путь это Асбтрактные инструменты. Принцип работы: мы берем все стили документа как некий массив и работаем как с элементами массива. Однако это стратегия, а для работы со стилями нужна тактика то есть изменяемые свойства. Поэтому реализация асбтрактных инструментов должна проявляться в конкретных инструментах.

Жизнь человеку даётся один раз и в основном случайно.

Используем Document Object Model (javascript) для управления стилями

Стратегия. Массив таблиц стилей документа styleSheets как абстрактный инструмент:

//Первая таблица стилей документа document.styleSheets[0] //отключили 1-й элемент (соответственно false = включение). document.styleSheets[0].disabled=true; //возвращает URI файла таблицы стилей для внешних таблиц и null для внутренних таблиц документа document.styleSheets[0].href; //возвращает количество таблиц стилей (не изменяемый) document.styleSheets.length;

В общем эти инструменты годятся для получения информации о подключенных таблицах стилей, отключения или подключения стилей вообще, но не для определения конкретных свойств элементов. То есть мы динамически можем подключать или отключать внешние файлы стилей и таким образом управлять отображением документа.

Тактика. Массив операторов CSS cssRules

Работаем опять таки с массивами, но уже с конкретными элементами, пока еще без привязки по идентификатору. То есть управляем правилами внутри таблиц стилей используя операторы CSS как элементы массива. Это опять таки удобно при написании библиотек для динамического управления стилями документов. При этом будет неважно как дизайнер обозвал селекторы, программист все равно получит нужный результат.

Имеется только одно изменяемое свойство cssText. Оно содержит код указанного оператора CSS в указанной таблице стилей. Свойство cssText может использоваться как для создания правил, так и для получения текста существующего оператора.

document.styleSheets[0].cssRules[0].cssText="BODY { color: red }";//присвоит первое правило первой таблице var my_css=document.styleSheets[0].cssRules[0].cssText;//получим код оператора в переменную document.styleSheets[0].deleteRule(0);//удаляет правило с номером 0 document.styleSheets[0].cssRules.length//возвращает количество операторов в данном списке document.styleSheets[0].insertRule("BODY { color: red }", 0);//вставляет новое правило перед правилом с номером 0 document.styleSheets[0].rules[0].style.cssText="BODY { color: red }";// для IE document.styleSheets[0].removeRule(0);// для IE document.styleSheets[0].rules.length;// для IE document.styleSheets[0].addRule("BODY", "color: red", 0);// для IE

Тактика продолжение. Способы доступа к стилям именованных элементов.

  1. Чтение и запись свойств, название свойства и его значение задаются текстовой строкой согласно правилам CSS; В последних кавычках(третья часть выражения) задается приоритет(или не задается - оставляем пустые кавычки).

    document.body.style.setProperty("background-color", "red", "!important"); document.getElementById("my_id").style.setProperty("background-color", "red", ""); document.getElementById("my_id").style.getPropertyValue("background-color");//чтение этих свойств.

  2. Чтение и запись свойств, при которых свойство задается соответствующим атрибутом объекта CSSStyleDeclaration. Записываем свойство CSS при помощи синтаксиса ява скрипт = интуитивно понятно:

    • css:"background-color";
    • javascript:"backgroundColor";
    • css:"border-bottom-color";
    • javascript:"borderBottomColor";

    а его значение задается текстовой строкой согласно правилам CSS.

    document.getElementById("my_id").style.backgroundColor = "red";//запись свойств document.getElementById("my_id").style.backgroundColor;//чтение этих свойств.

  3. Можно использовать cssText

    //запись свойств: как параметр атрибута style="код css" нашего элемента my_id var my_id = getElementById("my_id"); my_id.style.cssText = "height:100px; width:50px;" my_id.style.cssText;//чтение этих свойств.

  4. Можно удалять или вставлять атрибуты

    my_id.style.setAttribute("borderBottomWidth", 5, false);//вставили my_id.style.removeAttribute("borderTopWidth", false);//удалили


Контактная информация

E-Mail: oleynikww@gmail.com

Добавить комментарий

Комментарии пользователей