Последнее обновление: 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");
Взаимодействие JavaScript и CSS
Каскадные таблицы стилей (Cascading Style Sheets - CSS) - это стандарт визуального представления HTML-документов. Каскадные таблицы стилей предназначены для использования дизайнерами: они позволяют точно определить шрифты, цвета, величину полей, выравнивание, параметры рамок и даже координаты элементов в документе.
Но они также представляют интерес и для программистов, пишущих на клиентском языке JavaScript, потому что позволяют воспроизводить анимационные эффекты, такие как плавное появление содержимого документа из-за правого края, например, или сворачивание и разворачивание списков, благодаря чему пользователь получает возможность управлять объемом отображаемой информации.
Управление встроенными стилямиСамый простой способ управления стилями CSS - это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration . Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.
Например, чтобы вывести содержимое текстового элемента e крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:
E.style.fontSize = "24px"; e.style.fontWeight = "bold"; e.style.color = "blue";
При работе со свойствами стиля объекта CSSStyleDeclaration не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать:
Position: absolute; font-family: sans-serif; background-color: #ffffff;
Чтобы сделать то же самое для элемента e в JavaScript, необходимо заключить все значения в кавычки:
E.style.position = "absolute"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";
Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах стилей CSS, не нужны в строковых значениях, устанавливаемых с помощью JavaScript.
Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть:
E.style.left = 300; // Неправильно: это число, а не строка e.style.left = "300"; // Неправильно: отсутствуют единицы измерения e.style.left = "300px"; // Правильно
Единицы измерения обязательны при установке свойств стиля в JavaScript - так же, как при установке свойств стиля в таблицах стилей.
Многие CSS-свойства стиля, такие как font-size, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:
E.style.font-size = "24px"; // Синтаксическая ошибка!
Таким образом, имена свойств объекта CSSStyleDeclaration слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство border-left-width доступно через свойство borderLeftWidth, а к CSS-свойству font-family можно обратиться через свойство fontFamily.
Кроме того, когда CSS-свойство, такое как float, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта CSSStyleDeclaration. То есть, чтобы прочитать или изменить значение CSS-свойства float элемента, следует использовать свойство cssFloat объекта CSSStyleDeclaration.
Атрибут style HTML-элемента - это его встроенный стиль, и он переопределяет любые правила стилей в таблице CSS. Встроенные стили в целом удобно использовать для установки значений стиля, и именно такой подход использовался во всех примерах выше. Сценарии могут читать свойства объекта CSSStyleDeclaration, представляющего встроенные стили, но они возвращают осмысленные значения, только если были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style, установивший нужные свойства.
Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пикселам, но если прочитать свойство leftMargin одного из этих элементов, будет получена пустая строка, если только этот абзац не имеет атрибут style, переопределяющий значение, установленное таблицей стилей.
Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи: сценарий должен включать далеко не простую реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений. В целом, встроенный стиль элемента удобно использовать только для установки стилей.
Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration:
// Обе инструкции, следующие ниже, записывают в атрибут style // элемента e строку s: e.setAttribute("style", s); e.style.cssText = s; // Обе инструкции, следующие ниже, получают значение атрибута style // элемента e в виде строки: s = e.getAttribute("style"); s = e.style.cssText;
Создание анимационных эффектов средствами CSSОдной из наиболее типичных областей применения CSS является воспроизведение визуальных анимационных эффектов. Реализовать их можно с помощью метода setTimeout() или setInterval(), используя их для организации многократных вызовов функции, изменяющей встроенный стиль элемента.
// Делает элемент e относительно позиционируемым и перемещает его влево и вправо. // Первым аргументом может быть объект элемента или значение атрибута id требуемого // элемента. Если во втором аргументе передать функцию, она будет вызвана с элементом e // в виде аргумента по завершении воспроизведения анимации. Третий аргумент определяет // величину смещения элемента e. По умолчанию принимает значение 5 пикселов. // Четвертый аргумент определяет, как долго должен воспроизводиться эффект. // По умолчанию эффект длится 500 мсек. function shake(e, oncomplete, distance, time) { // Обработка аргументов if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; if (!distance) distance = 5; var originalStyle = e.style.cssText; // Сохранить оригинальный стиль e e.style.position = "relative"; // Сделать относит. позиционируемым var start = (new Date()).getTime(); // Запомнить момент начала анимации animate(); // Запустить анимацию // Эта функция проверяет прошедшее время и изменяет координаты e. // Если анимацию пора завершать, восстанавливает первоначальное состояние // элемента e. Иначе изменяет координаты e и планирует следующий свой вызов. function animate() { var now = (new Date()).getTime(); // Получить текущее время var elapsed = now-start; // Сколько прошло времени с начала? var fraction = elapsed / time; // Доля от требуемого времени? if (fraction
Обе функции, shake() и fadeOut(), принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:
Щелкните меня!
Обратите внимание, насколько функции shake() и fadeOut() похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств.
Вычисленные стилиСвойство style элемента определяет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем.
Вычисленный стиль элемента - это набор значений свойств, которые браузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом CSSStyleDeclaration. Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект CSSStyleDeclaration позволяет точно узнать значения свойств стилей, которые браузер использовал при отображении соответствующего элемента.
Получить вычисленный стиль элемента можно с помощью метода getComputedStyle() объекта Window. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «::before», «::after», «:first-line» или «:first-letter»:
Var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(element, null);
Возвращаемым значением метода getComputedStyle() является объект CSSStyleDeclaration, представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами CSSStyleDeclaration, представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:
Свойства вычисленного стиля доступны только для чтения.
Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «px», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».
Свойства, являющиеся краткой формой записи, не вычисляются - только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства margin, вместо этого нужно обращаться к свойствам marginLeft, marginTop и т.д.
Свойство cssText вычисленного стиля не определено.
Работа с вычисленными стилями может оказаться весьма непростым делом, и обращение к ним не всегда возвращает ожидаемую информацию. Рассмотрим в качестве примера свойство font-family: оно принимает список разделенных запятыми имен семейств шрифтов для совместимости. При чтении свойства fontFamily вычисленного стиля вы ждете значение наиболее конкретного стиля font-family, применяемого к элементу. А в этом случае может вернуться такое значение, как «arial,helvetica,sans-serif», которое ничего не говорит о гарнитуре фактически используемого шрифта.
Управление таблицами стилейДо сих пор мы видели, как устанавливать и получать значения CSS-свойств стиля и классы отдельных элементов. Однако существует еще возможность управления самими таблицами стилей CSS. Обычно в этом не возникает необходимости, тем не менее такая возможность иногда бывает полезной, и в этом разделе коротко будут представленные возможные приемы.
При работе с самими таблицами стилей вам придется столкнуться с двумя типами объектов. Первый тип - это объекты Element, представляющие элементы и , которые содержат или ссылаются на таблицы стилей. Это обычные элементы документа, и если в них определить атрибут id, вы сможете выбирать их с помощью метода document.getElementById().
Второй тип объектов - объекты CSSStyleSheet , представляющие сами таблицы стилей. Свойство document.styleSheets возвращает доступный только для чтения объект, подобный массиву, содержащий объекты CSSStyleSheet, представляющие таблицы стилей документа. Если в элементе или , определяющем или ссылающемся на таблицу стилей, определить атрибут title, этот объект будет доступен как свойство объекта CSSStyleSheet с именем, указанным в атрибуте title.
Следующие разделы описывают, какие операции могут выполняться с этими элементами и и объектами таблиц стилей.
Включение и выключение таблиц стилейПростейший прием работы с таблицами стилей является к тому же самым переносимым и надежным. Элементы и и объекты CSSStyleSheet определяют свойство disabled , доступное сценариям на языке JavaScript для чтения и записи. Как следует из его имени, если свойство disabled принимает значение true, таблица стилей оказывается отключенной и будет игнорироваться браузером.
Это наглядно демонстрирует функция disableStylesheet(), представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве document.styleSheets. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу document.querySelectorAll() и установит в значение true свойство disabled всех полученных элементов:
Function disableStylesheet(ss) { if (typeof ss === "number") document.styleSheets.disabled = true; else { var sheets = document.querySelectorAll(ss); for(var i = 0; i
Получение, вставка и удаление правил из таблиц стилейВ дополнение к возможности включения и отключения таблиц стилей объект CSSStyleSheet также определяет API для получения, вставки и удаления правил стиля из таблиц стилей. IE8 и более ранние версии реализуют несколько иной API, отличный от стандартного, реализуемого другими браузерами.
Как правило, непосредственное манипулирование таблицами стилей редко бывает полезным. Вместо того чтобы добавлять новые правила в таблицы стилей, обычно лучше оставить их статичными и работать со свойством className элемента. В то же время, если необходимо предоставить пользователю возможность полного управления таблицами стилей веб-страницы, может потребоваться организовать динамическое манипулирование таблицами.
Объекты CSSStyleSheet хранятся в массиве document.styleSheets. Объект CSSStyle Sheet имеет свойство cssRules , хранящее массив правил стилей:
Var firstRule = document.styleSheets.cssRules;
В IE это свойство носит имя rules, а не cssRules.
Элементами массива cssRules или rules являются объекты CSSRule . В стандартном API объект CSSRule может представлять CSS-правила любого типа, включая @-правила, такие как директивы @import и @page. Однако в IE массив rules может содержать только фактические правила таблицы стилей.
Объект CSSRule имеет два свойства, которые могут использоваться переносимым способом. (В стандартном API правила, не относящиеся к правилам стилей, не имеют этих свойств, и потому, возможно, вам потребуется пропускать их при обходе таблицы стилей.) Свойство selectorText - это CSS-селектор для данного правила, а свойство style - это ссылка на доступный для записи объект CSSStyleDeclaration, который описывает стили, связанные с этим селектором. Напомню, что CSSStyleDeclaration - это тот же самый тип, который используется для представления встроенных и вычисленных стилей.
Объект CSSStyleDeclaration может применяться для чтения существующих или создания новых стилей в правилах. Нередко при обходе таблицы стилей интерес представляет сам текст правила, а не разобранное его представление. В этом случае можно использовать свойство cssText объекта CSSStyleDeclaration, в котором содержатся правила в текстовом представлении.
В дополнение к возможности получения и изменения существующих правил таблиц стилей имеется возможность добавлять правила в таблицу стилей и удалять их из таблицы. Стандартный прикладной интерфейс определяет методы insertRule() и deleteRule() , позволяющие добавлять и удалять правила:
Document.styleSheets.insertRule("H1 { text-weight: bold; }", 0);
Браузер IE не поддерживает методы insertRule() и deleteRule(), но определяет практически эквивалентные им функции addRule() и removeRule(). Единственное существенное отличие (помимо имен функций) состоит в том, что addRule() ожидает получить селектор и стиль в текстовом виде в двух отдельных аргументах.
Создание новых таблиц стилейНаконец, имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве браузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент и вставляется в документ в раздел , затем с помощью свойства innerHTML добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект CSSStyleSheet необходимо создавать с помощью нестандартного метода document.createStyleSheet() , а текст таблицы стилей добавлять с помощью свойства cssText.
Пример ниже демонстрирует создание новых таблиц:
// Добавляет таблицу стилей в документ и заполняет ее указанными стилями. // Аргумент styles может быть строкой или объектом. Если это строка, // она интерпретируется как текст таблицы стилей. Если это объект, то каждое // его свойство должно определять правило стиля, добавляемое в таблицу. // Именами свойств являются селекторы, а их значениями соответствующие стили function addStylesheet(styles) { // Сначала необходимо создать новую таблицу стилей var styleElt, styleSheet; if (document.createStyleSheet) { //Если определен IE API, использовать его styleSheet = document.createStyleSheet(); } else { var head = document.getElementsByTagName("head"); styleElt = document.createElement("style"); // Новый элемент head.appendChild(styleElt); // Вставить в // Теперь новая таблица находится в конце массива styleSheet = document.styleSheets; } // Вставить стили в таблицу if (typeof styles === "string") { // Аргумент содержит текстовое определение таблицы стилей if (styleElt) styleElt.innerHTML = styles; else styleSheet.cssText = styles; // IE API } else { // Аргумент объект с правилами для вставки var i = 0; for(selector in styles) { if (styleSheet.insertRule) { var rule = selector + " {" + styles + "}"; styleSheet.insertRule(rule, i++); } else { styleSheet.addRule(selector, styles, i++); } } } }
Аннотация: Доступ к таблицам стилей. Свойства таблиц стилей. Добавление и удаление правил. Изменение стилей элементов. Имена классов элементов.
Давайте рассмотрим (в данный момент) теоретический пример - пусть имеется 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 имеет дефис. В этом случае
Здравствуйте! В этом уроке я хотел бы рассказать о том как можно поменять стиль элемента на веб-странице, используя JavaScript. Надо сказать, что в JavaScript для работы со стилями применяются, как правило, 2 подхода:
- Изменение свойства style
- Изменение значения класса элемента
Свойство style представляет собой, так называемые инлайновые стили, которые будут отображаться у элемента через атрибут style. Для примера давайте зададим цвет шрифта:
Var root1 = document.documentElement; // устанавливаем стиль root1.style.color = "red"; // получаем значение стиля document.write(root1.style.color); // red
В данном примере название свойства color совпадает с аналогичным свойством css. По аналогии можно установить цвет с помощью css:
Html{ color: red; }
Однако для тех свойств css в названии которых присутствует дефис, например, font-size. В JavaScript для этих свойств дефис удаляется, а первая буква, идущая после дефиса пишется как прописная, то есть в верхнем регистре
Var root1 = document.documentElement; root1.style.fontFamily = "Arial";
Свойство className. Работа с классами в JavaScript.С помощью такого свойства, как className вы можете установить атрибут class у любого элемента html. Вот пример:
.redStyle{ color:red; font-family:Arial; } .article{ font-size:22px; } Заголовок статьи
Первый абзац
Еще абзац
var article = document.querySelector("div.art"); // установка нового класса article.className = "redStyle"; // получаем название класса document.write(article.className);Благодаря не приходится настраивать каждое отдельное свойство с помощью свойства style.
Но при этом следует учитывать, что предыдущее значение атрибута class будет удалено. Поэтому, если вам нам надо добавить класс, то его следует объединить со старым классом:
Article.className = article.className + " blueStyle";
А вот если надо и вовсе удалить все классы, то можно присвоить свойству className пустую строку:
ArticleDiv.className = "";
Свойство classList. Добавление нового класса к элементу.Выше мы с вами рассмотрели, как добавлять классы к элементу на веб-странице, но для управления большим количеством классов удобнее использовать другое свойство classList. Это свойство представляет из себя объект, который реализует такие методы:
- add(className): добавит класс className
- remove(className): удалит класс className
- toggle(className): переключит у элемента класс на className. То есть, если класса нет, то он добавится, а если есть, то удалится.
Var article = document.querySelector("div.art"); // удаляем класс article.classList.remove("art"); // добавляем класс
article.classList.add(«redStyle»); // переключаем класс
article.classList.toggle(«art»);
Для того, чтобы задать класс используется метод — className.
Для задания стиля элементу через атрибут style — используется метод style.
Для добавления и удаления класса к элементу используются методы classList.add(className) и classList.remove(className).
В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.
Управление классом (классами) элементаПервый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className . Данное свойство является отражением атрибута class в DOM. DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье .
Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className:
var elem = document.querySelector("#alert"); // добавим класс к элементу elem.className = "alert"; // "alert" // изменим класс у элемента elem.className = "alert-warning"; // "alert-warning" // получим значение класса и сохраним его в className var classElem = elem.className; // "alert-warning" // удалим класс у элемента elem.className = ""; // ""
Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.
Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:
var elem = document.querySelector("#alert"); // добавим класс к элементу elem.setAttribute("class", "alert"); // изменим класс у элемента elem.setAttribute("class", "alert-warning"); // получим значение класса и сохраним его в className var classElem = elem.getAttribute("class"); // "alert-warning" // удалим класс у элемента elem.removeAttribute("class");
DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.
Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.
Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.
Пример, в котором проверим наличие у элемента класса content__show:
... var elem = document.querySelector("#content"); if ((" " + elem.className + " ").indexOf(" content__show ") > -1) { // у элемента есть класс content__show } else { // у элемента класса content__show нет }
Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев DOM-свойство classList .
Свойство classListСвойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.
Методы classList:
- .add(className1[,className2,...]) - добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
- .remove(className1[,className2,... ]) - удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
- .contains(className) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false .
- .toggle(className [,flag]) - переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр (flag) необязательный. По умолчанию он имеет значение undefined . Если ему установить значение true или false , то он будет работать как метод add или remove , т.е. либо добавлять класс к элементу, либо удалять его у него.
Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList:
// получим элемент c id = "sidebar" var sideBar = document.querySelector("#sidebar"); // переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему sideBar.classList.toogle("hidden-xs"); // добавим три дополнительных класса к элементу sideBar.classList.add("col-xs-6","col-sm-4","col-md-3"); // удалим класс hidden-xs у элемента sideBar.classList.remove("hidden-xs"); // проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md if (sideBar.classList.contains("hidden-lg") { myID.classList.add("hidden-md"); }
Объект classList является псевдомассивом, т.е. его можно перебрать как массив.
Пример, в котором переберём все классы classList:
... var content = document.querySelector(".content"); // Вариант №1. С помощью цикла for // classList.length - количество классов у элемента // отсчёт классов в classList ведётся с 0 for (var i = 0, length = content.classList.length; i < length; i++) { // i - индекс класса в classList // выведем класс в консоль console.log(content.classList[i]); // или так (с помощью метода item) console.log(content.classList.item(i)); } // если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined console.log(content.classList); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); }
Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.
Стили элементаВ DOM у каждого элемента есть свойство style , с помощью которого мы можем управлять его стилями. Значение данного свойства - это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.
Пример, как можно к элементу добавить стили через DOM-свойство style:
Квадрат var square = document.querySelector(".square"); square.style.width = "170px"; square.style.height = "170px"; square.backgroundColor = "green";
Имена свойств объекта style обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color для объекта style будет указывать как backgroundColor . А, например, CSS-свойство с браузерным префиксом -webkit-border-radius - как WebkitBorderRadius .
Удаление стилейНапример, установим body некоторый цвет фона:
Document.body.style.backgroundColor = "#eee";
Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:
Document.body.style.backgroundColor = "";
Примеры использования DOM-свойства style для установки стилей элементам.
// установим элементу с id = "introtext" с использованием style красный цвет текста document.querySelector("#introtext").style.color = "red"; // установим всем элементам p на странице с использованием style зелёный цвет текста var paragraphs = document.querySelectorAll("p"); for (var i = 0, length = paragraphs.length; i < length; i++) { paragraphs[i].style.backgroundColor = "green"; } // выведем в консоль все CSS свойства элемента с идентификатором "introtext" var styleElem = document.querySelector("#introtext").style; for (var i = 0, length = styleElem.length; i < length; i++) { console.log(styleElem[i]); }
Свойство cssTextКроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText . Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style .
Пример, в котором установим стили "font-size:40px; color:blue;" элементам с классом intro:
//получим элементы с классом intro var intro = document.querySelectorAll("intro"); //установим "font-size:40px; color:blue;" всем элементам в коллекции, содержащейся в intro for (var i = 0, length = intro.length; i < length; i++) { intro[i].style.cssText = "font-size:40px; color:blue;"; }
При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.
Выполнить операцию, аналогичную той которую выполняет свойство style.cssText , можно ещё через метод setAttribute .
Например:
//получим первый элемент с классом intro var info = document.querySelector("info"); //установим ему стиль "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute("style", "margin: 10px; padding: 10px; border: 1px solid green;");
Задания1. Написать скрипт, используя classList , для установления элементу с классом text трех классов: size-40 , color-red и bg-yellow:
.size-40 { font-size: 40px; } .color-red { color: red; } .bg-yellow { background: yellow; }
Некоторый текст...
2. Написать код для установления стиля "width: 180px; height: 180px;" всем элементам на странице с классом, начинающимся со слов block- .
Загрузка...