Аннотация: Доступ к таблицам стилей. Свойства таблиц стилей. Добавление и удаление правил. Изменение стилей элементов. Имена классов элементов.
Давайте рассмотрим (в данный момент) теоретический пример - пусть имеется web - сайт , где представлена серия технических статей. Мы хотим привлечь внимание к некоторым из этих статей с помощью интересной анимированной карусели, но как быть с пользователями, у которых JavaScript не включен по каким-то причинам? Вспоминая полученные знания о ненавязчивом JavaScript, мы хотим, чтобы функции Web -сайта также работали для этих пользователей, но мы можем захотеть оформить сайт для этих пользователей по-другому, чтобы им было удобно использовать сайт , даже без карусели.
Если требуется удалить это правило , можно вызвать функцию stylesheet.deleteRule(index) , где index будет индексом правила , которое будет удалено.
В примере демонстрации статей можно создать правило , которое делает свойство display равным none для всех статей о HTML и JavaScript - посмотрите в примере карусели (http://dev.opera.com/articles/view/dynamic-style-css-javascript/carousel.html), чтобы увидеть это в действии.
Примечание : IE не реализует правила в соответствии со стандартами. Вместо атрибута cssRules он использует rules . IE использует также removeRule вместо deleteRule и addRule( selector , rule, index) вместо insertRule .
Изменение стилей элементовТеперь вы должны понимать, как редактировать таблицы стилей , соединенные со страницей, и создавать и модифицировать в них правила CSS . Что делать, если вы захотите изменить определенный элемент в DOM ? Используя DOM API можно получить доступ к определенным элементам страницы. Возвращаясь к примеру карусели можно видеть, что функции определены таким образом, что при щелчке на статье эта статья выделяется, в то время как основной текст статьи выводится ниже.
С помощью DOM мы получаем доступ к объекту style , который описывает стиль документа. Этот объект style определен как CSSStyleDeclaration ; подробное объяснение этого можно найти в документации W3C по интерфейсу CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Объект style работает не совсем так, как некоторые другие свойства, определенные в элементе HTML . В отличие от element.href или element.id , которые возвращают строки, element.style возвращает объект . Это означает, что невозможно задать стиль, присваивая строку для element.style .
Объект style имеет атрибуты, которые соответствуют различным заданным свойствам CSS . Например, style.color возвращает заданный на элементе цвет. Выполняя element.style.color = "red"; можно динамически изменять стиль. Ниже показана функция , которая превращает цвет элемента в красный, когда ей передается id элемента.
function colorElementRed(id) { var el = document.getElementById(id); el.style.color = "red"; }
Можно также использовать setAttribute(key, value) для задания стиля элемента. Например, задать цвет элемента как красный, вызывая на элементе element.setAttribute("style", "color: red"); , но будьте осторожны, так как это удаляет любые изменения, сделанные в объекте style .
Когда стиль элемента задается таким образом, то это то же самое, как если бы мы задавали его как объявление атрибута style элемента html . Этот стиль будет применяться только в том случае, когда важность и специфичность правила будут больше, чем другие примененные к элементу правила (специфичность объясняется в лекции 28 о наследовании и каскадировании CSS ).
У некоторых из вас может возникнуть вопрос, что происходит, когда заданное свойство CSS имеет дефис. В этом случае
Последнее обновление: 1.11.2015
Для работы со стилевыми свойствами элементов в JavaScript применяются, главным образом, два подхода:
Изменение свойства style
Изменение значения атрибута class
Свойство style представляет сложный объект для управления стилем и напрямую сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS: element.style.свойствоCSS . Например, установим цвет шрифта:
Var root = document.documentElement; // устанавливаем стиль root.style.color = "blue"; // получаем значение стиля document.write(root.style.color); // blue
В данном случае название свойства color совпадает со свойством css. Аналогично мы могли бы установить цвет с помощью css:
Html{ color:blue; }
Однако ряд свойств css в названиях имеют дефис, например, font-family . В JavaScript для этих свойств дефис не употребляется. Только первая буква, которая идет после дефиса, переводится в верхний регистр:
Var root = document.documentElement; root.style.fontFamily = "Verdana";
Свойство classNameС помощью свойства className можно установить атрибут class элемента html. Например:
.blueStyle{ color:blue; font-family:Verdana; } .article{ font-size:20px; } Заголовок статьи
Первый абзац
Второй абзац
var articleDiv = document.querySelector("div.article"); // установка нового класса articleDiv.className = "blueStyle"; // получаем название класса document.write(articleDiv.className);Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства style .
Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом:
ArticleDiv.className = articleDiv.className + " blueStyle";
И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:
ArticleDiv.className = "";
Свойство classListВыше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList . Это свойство представляет объект, реализующий следующие методы:
add(className) : добавляет класс className
remove(className) : удаляет класс className
toggle(className) : переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется
Например:
Var articleDiv = document.querySelector("div.article"); // удаляем класс articleDiv.classList.remove("article"); // добавляем класс articleDiv.classList.add("blueStyle"); // переключаем класс articleDiv.classList.toggle("article");
ОписаниеСвойство style представляет глобальный атрибут style HTML-элемента. Значением свойства style является объект CSSStyleDeclaration, который содержит всю стилевую информацию HTML-элемента, добавленную в элемент через глобальный атрибут style. Свойствами объекта CSSStyleDeclaration являются CSS свойства.
Для изменения или добавления новых стилей к HTML-элементу нужно воспользоваться свойством, имя которого будет совпадать с именем CSS свойства, значение которого вы хотите изменить. Например, чтобы вывести текстовое содержимое элемента курсивным шрифтом красного цвета, можно выполнить следующие инструкции:
Elem.style.fontStyle = "italic"; elem.style.color = "red";
Обратите внимание, что все значения свойств объекта CSSStyleDeclaration должны задаваться в виде строк. Например, в таблице стилей или атрибуте style можно написать:
Color: red; font-size: 50px; text-decoration: underline;
Чтобы сделать тоже самое в JavaScript необходимо заключить все значения в кавычки:
Elem.style.color = "red"; elem.style.fontSize = "50px"; elem.style.textDecoration = "underline";
Обратите внимание, что точки с запятыми не входят в строковые значения. Точки с запятой, используемые в CSS, не нужны в строковых значениях, устанавливаемых с помощью JavaScript.
Многие свойства CSS, такие как text-decoration, содержат в своих именах дефис. В JavaScript дефис интерпретируется как оператор минус, поэтому инструкция, приведённая ниже, не будет работать:
Elem.style.text-decoration = "overline";
Таким образом, имена свойств объекта CSSStyleDeclaration немного отличаются от имён реальных CSS-свойств. Если имя CSS свойства содержит дефисы, то имя свойства объекта CSSStyleDeclaration образуется путём удаления всех дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из дефисов. Например CSS-свойство list-style-type в JavaScript будет выглядеть как listStyleType.
Кроме того, когда CSS свойство, такое как float, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс "css", чтобы создать допустимое имя свойства. То есть, чтобы прочитать или изменить значение CSS-свойства float, следует использовать свойство cssFloat.
При использовании свойств объекта CSSStyleDeclaration для чтения стилевой информации о HTML-элементе осмысленную информацию будут возвращать только те свойства, значения для которых были ранее установлены сценарием или заданы с помощью атрибута style.
Встроенный стиль элемента в JavaScript удобно использовать только для установки стилей. Для получения стилевой информации элемента (значения всех CSS-свойств установленных для элемента) нужно использовать метод window.getComputedStyle().
Пример Название документаЭто абзац.
Изменить текст
function foo() {
var x = document.getElementById("test");
var color = " - цвет текста: " + x.style.color;
var bold = ".
И теперь текст имеет жирное начертание.";
x.innerHTML += color + bold;
x.style.fontWeight = "bold";
}
Всем привет! В этой статье мы рассмотрим, как правильно и кроссбраузерно задавать стили в javascript .
Итак, те, кто из вас уже хоть немного знаком с javascript , знают, что у элементов есть свойство style , в котором хранится объект, используя который можно задать те или иные css стили. Однако, здесь не все так просто, как может показаться на первый взгляд. И вот почему. Создадим два самых обычных div блока, но для одного зададим стили через атрибут style , а для другого через тег style .
div {
width: 150px;
height: 150px;
}
#div1 {
background: #f00;
}
Теперь попытаемся вывести значение свойства background для этих блоков.
Var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
alert(div1.style.background);
alert(div2.style.background);
В первом случае мы ничего не получим, но для блока div2 стили будут выведены. Почему? Все дело в том, что javascript может вывести значения только тех свойств, которые были заданы прямо в html разметке, используя атрибут style , и те, которые были заданы через javascript . Если мы сейчас зададим свойство background таким образом
Div1.style.background = "#f00";
То теперь значение будет выведено через alert .
Alert(div1.style.background);
Те же стили, что мы задаем в теге style или во внешней таблице стилей, называются "computed styles " или "вычисляемые стили ". Название они такое получили неспроста. Дело в том, что браузер сначала считывает html разметку, а затем вычисляет стили, которые мы задаем во внешней таблице стилей, и применяет их к этой разметке.
Тем не менее, получить к ним доступ мы все же можем. В спецификации DOM Level2 для этого есть специальная функция getComputedStyle() . Давайте посмотрим, как она работает.
Var styles = getComputedStyle(div1);
alert(styles.background);
Вы должны передать в нее элемент, стили которого хотите получить, и она вернет вам объект. Теперь просто укажите нужное вам свойство, и вы тут же получите его значение.
Однако эта функция не работает со старыми браузерами(IE8- ), поэтому, если вы хотите, чтобы ваш код был кроссбраузерным, то используйте приведенный ниже код.
Function getStyle(element) {
return window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
}
Использование аналогичное
Var styles = getStyle(div1); alert(styles.background);
Итак, сегодня мы узнали, как работать со стилями в javascript и как получать стили кроссбраузерно .
Загрузка...