В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами 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- .

Описание

Свойство 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 для работы со стилями применяются, как правило, 2 подхода:

• Изменение свойства style
• Изменение значения класса элемента

Свойство 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).

В этом примере, x, y , и z , являются переменными:

Из приведенного выше примера, вы можете ожидать:

• x сохраняет значение 5
• y сохраняет значение 6
• z сохраняет значение 11

Так же, как алгебра

В этом примере, price1, price2 , и total , являются переменными:

В программировании, так же, как в алгебре, мы используем переменные (например, price1 ) для хранения значений.

В программировании, так же, как в алгебре, мы используем переменные в выражениях (total = price1 + price2) .

Из приведенного выше примера, вы можете рассчитать total быть 11.

переменные JavaScript являются контейнерами для хранения значений данных.

JavaScript Идентификаторы

Все переменные JavaScript должны быть идентифицированы с уникальными именами.

Эти уникальные имена называются идентификаторы.

Идентификаторы могут быть короткие имена (например, x и y ), или более описательные имена (age, sum, totalVolume) .

Общие правила построения имен для переменных (уникальными идентификаторами) являются:

• Имена могут содержать буквы, цифры, подчеркивания и знаков доллара.
• Имена должны начинаться с буквы
• Имена также могут начинаться с $ и _ (но мы не будем использовать его в этом руководстве)
• Имена чувствительны к регистру (у и Y являются различными переменными)
• Зарезервированные слова (например, ключевые слова JavaScript) не могут быть использованы в качестве имен

JavaScript идентификаторы чувствительны к регистру.

Оператор присваивания

В JavaScript, знак равенства (=) является "назначение" оператор, а не "равно".

Это отличается от алгебры. Ниже не имеет смысла в алгебре:

В JavaScript, однако, это имеет смысл: он присваивает значение х + 5 до х.

(Он вычисляет значение х + 5, и помещает результат в х. Величина х увеличивается на 5)

"Равно" оператор записывается как == в JavaScript.

Типы данных JavaScript

Переменные JavaScript может содержать цифры, как 100 и текстовые значения, как "John Doe" .

В программировании, текстовые значения называются текстовые строки.

JavaScript может работать с различными типами данных, но на данный момент, просто думаю, чисел и строк.

Строки написаны в двойные или одинарные кавычки. Числа записываются без кавычек.

Если поставить кавычки вокруг числа, оно будет рассматриваться как текстовая строка.

Декларирование (Создание) Переменные JavaScript

Создание переменной в JavaScript называется "объявить" переменную.

Вы объявляете переменную JavaScript с var ключевым словом:

После объявления, переменная не имеет значения. (Технически это имеет значение не определено)

Для того, чтобы присвоить значение переменной, используйте знак равенства:

carName = "Volvo";

Можно также присвоить значение переменной при объявлении его:

var carName = "Volvo";

В приведенном ниже примере, мы создаем переменную с именем carName и присвоить значение "Volvo" к нему.

Тогда мы "выход" значение внутри HTML пункта с id="demo" :

пример

var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;

Попробуй сам " Одно заявление, много переменных

Можно объявить много переменных в одном операторе.

Начните заявление с var и разделим переменные через запятую:

Объявление может занимать несколько строк:

Значение = не определено

В компьютерных программах, переменные часто объявлены без значения. Значение может быть то, что должно быть вычислено, или что-то, что будет предоставлена ​​позже, как пользовательский ввод.

Переменная, объявленная без значения будет иметь значениене определено.

Переменная carName будет иметь значение не определено после выполнения этого заявления.

Переменная – это просто символьное имя для значения. Переменная даёт возможность обратиться к значению по имени, это означает, что, когда в программе указывается имя переменной, вместо неё подставляется значение.

Объявление

Прежде чем использовать переменную, её необходимо объявить. Переменные объявляются с помощью ключевого слова var или let , за которым следует имя переменной:

Var num; let num2;

Один раз использовав ключевое слово var или let , можно объявить несколько переменных, перечислив их через запятую:

Var num, num2; let num3, num4;

Инициализация и присваивание значения

Объявление переменных можно совмещать с их инициализацией. Инициализация - это присвоение начального значения переменной. Присвоить какое-либо значение переменной можно с помощью оператора присваивания , который обозначается символом равно (= ):

Var color = "чёрный"; let num = 10, num2 = 15;

Переменные в JavaScript не имеют типа, поэтому переменной может быть присвоено значение любого типа, а затем этой же переменной может быть присвоено значение другого типа:

Var a = 10; let b = 20; a = "текст"; b = "текст";

Если при объявлении переменной ей не было присвоено никакого значения, она будет иметь специальное значение undefined , до тех пор, пока ей не будет присвоено другое значение:

Var a; let b; console.log(a); // undefined console.log(b); // undefined

Обращение к значению

После того как переменная объявлена ключевое слово var или let при использовании переменной указывать не нужно. Чтобы в программе обратиться к значению переменной, надо просто написать имя переменной, интерпретатор JavaScript вместо неё подставит значение, которое хранится в переменной:

Var x = 10, msg = "Hello"; alert(x); document.write(msg); Попробовать »

Так как вместо имени переменной подставляется её значение, можно копировать значение из одной переменной в другую:

Var a = 10; let b; b = a; // Тоже самое, что и b = 10;

Если попытаться использовать необъявленную переменную, будет вызвана ошибка:

Console.log(x); // Ошибка