В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами 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. Для примера давайте зададим цвет шрифта:
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); // Ошибка