Modern HTML5 Techniques for changing classes
Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.
Simple cross-browser solution
The standard JavaScript way to select an element is using document.getElementById("Id")
, which is what the following examples use — you can of course obtain elements in other ways, and in the right situation may simply use this
instead — however, going into detail on this is beyond the scope of the answer.
To change all classes for an element:
To replace all existing classes with one or more new classes, set the className attribute:
document.getElementById("MyElement").className = "MyClass";
(You can use a space-delimited list to apply multiple classes.)
To add an additional class to an element:
To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:
document.getElementById("MyElement").className += " MyClass";
To remove a class from an element:
To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|s)MyClass(?!S)/g , '' )
/* Code wrapped for readability - above is all one statement */
An explanation of this regex is as follows:
(?:^|s) # Match the start of the string or any single whitespace character
MyClass # The literal text for the classname to remove
(?!S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be the end of the string or space)
The g
flag tells the replace to repeat as required, in case the class name has been added multiple times.
To check if a class is already applied to an element:
The same regex used above for removing a class can also be used as a check as to whether a particular class exists:
if ( document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/) )
### Assigning these actions to onClick events:
Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onClick="this.className+=' MyClass'"
) this is not recommended behavior. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.
The first step to achieving this is by creating a function, and calling the function in the onClick attribute, for example:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onClick="changeClass()">My Button</button>
(It is not required to have this code in script tags, this is simply for the brevity of example, and including the JavaScript in a distinct file may be more appropriate.)
The second step is to move the onClick event out of the HTML and into JavaScript, for example using addEventListener
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading — without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.)
JavaScript Frameworks and Libraries
The above code is all in standard JavaScript, however, it is common practice to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code.
Whilst some people consider it overkill to add a ~50 KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior, it is well worth considering.
(Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.)
The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).
(Note that $
here is the jQuery object.)
Changing Classes with jQuery:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
In addition, jQuery provides a shortcut for adding a class if it doesn’t apply, or removing a class that does:
$('#MyElement').toggleClass('MyClass');
### Assigning a function to a click event with jQuery:
$('#MyElement').click(changeClass);
or, without needing an id:
$(':button:contains(My Button)').click(changeClass);
Modern HTML5 Techniques for changing classes
Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.
Simple cross-browser solution
The standard JavaScript way to select an element is using document.getElementById("Id")
, which is what the following examples use — you can of course obtain elements in other ways, and in the right situation may simply use this
instead — however, going into detail on this is beyond the scope of the answer.
To change all classes for an element:
To replace all existing classes with one or more new classes, set the className attribute:
document.getElementById("MyElement").className = "MyClass";
(You can use a space-delimited list to apply multiple classes.)
To add an additional class to an element:
To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:
document.getElementById("MyElement").className += " MyClass";
To remove a class from an element:
To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|s)MyClass(?!S)/g , '' )
/* Code wrapped for readability - above is all one statement */
An explanation of this regex is as follows:
(?:^|s) # Match the start of the string or any single whitespace character
MyClass # The literal text for the classname to remove
(?!S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be the end of the string or space)
The g
flag tells the replace to repeat as required, in case the class name has been added multiple times.
To check if a class is already applied to an element:
The same regex used above for removing a class can also be used as a check as to whether a particular class exists:
if ( document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/) )
### Assigning these actions to onClick events:
Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onClick="this.className+=' MyClass'"
) this is not recommended behavior. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.
The first step to achieving this is by creating a function, and calling the function in the onClick attribute, for example:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onClick="changeClass()">My Button</button>
(It is not required to have this code in script tags, this is simply for the brevity of example, and including the JavaScript in a distinct file may be more appropriate.)
The second step is to move the onClick event out of the HTML and into JavaScript, for example using addEventListener
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading — without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.)
JavaScript Frameworks and Libraries
The above code is all in standard JavaScript, however, it is common practice to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code.
Whilst some people consider it overkill to add a ~50 KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work or anything that might have unusual cross-browser behavior, it is well worth considering.
(Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.)
The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).
(Note that $
here is the jQuery object.)
Changing Classes with jQuery:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
In addition, jQuery provides a shortcut for adding a class if it doesn’t apply, or removing a class that does:
$('#MyElement').toggleClass('MyClass');
### Assigning a function to a click event with jQuery:
$('#MyElement').click(changeClass);
or, without needing an id:
$(':button:contains(My Button)').click(changeClass);
Современный HTML5 сильно улучшается и тем самым дает больше возможностей для JavaScript. В этой записи я покажу как можно изменять, добавить или удалить класс (class) для элементов с помощью JavaScript или jQuery.
HTML для демо
Допустим у нас есть такой элемент, у которого есть три класса «test1», «test2» и «hello-world» и id «myel».
<div class="test1 test2 hello-world" id="myel">Текст внутри элемента</div>
Это пример будет использоваться для JavaScript и jQuery решений ниже.
Современные браузеры добавили новые способы управления классами для элементов, например classList.
Ниже предоставлен пример его работы с официального сайта MDN:
var elem = document.querySelector("#clock") //Выведем классы console.log(elem.classList); //DOMTokenList ["example", "for", "you"] //Добавим классы elem.classList.add("ok", "understand"); console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"] //Переключим классы elem.classList.toggle("you"); elem.classList.toggle("he"); console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"] //Проверим класс console.log(elem.classList.contains("example")); //true console.log(elem.classList.contains("lol")); //false //И удалим классы elem.classList.remove("example", "for", "understand", "he"); console.log(elem.classList); //DOMTokenList ["ok"]
Современное HTML решение используя classList
Для начала нам нужно найти сам элемент с помощью document.getElementById()
и далее использовать метод classList
. Выглядит это все следующим образом:
// Добавить "test3" в список классов document.getElementById("myel").classList.add('test3'); // Удалим test2 из списка всех классов document.getElementById("myel").classList.remove('test2'); // если у элемента класс test1? // вернет "true" потому что он действительно есть if ( document.getElementById("myel").classList.contains('test1') ) // Класс "dd-11" будет добавляться и убираться document.getElementById("myel").classList.toggle('dd-11');
В целом весь код выше в комментариях и вам должно понять. Но вот еще небольшое разъяснение:
add()
— добавляет новый классremove()
— удаляет указанный классcontains()
— проверяет существование классаtoggle()
— ставит и удаляет класс, этот метод можно использовать для например нажатия на кнопку, чтобы у элемента ставился и убирался класс
Если лишь одно НО: Internet Explorer до 10 версии не поддерживают метод classList. Если для вас это важно, то лучше воспользоваться другими способами, которые я буду описывать ниже в этом посте. Но не забывайте, что веб очень быстро улучшается и уже есть первые попытки IE к поддержке этого метода, но лучше пока что не рисковать.
100% рабочий способ, поддерживаемый всеми браузерами (кроссбраузерный)
Выглядит он вот так:
document.getElementById("myel").className = "wow";
Мы используем className
для манипуляции классами элемента «myel». Есть лишь один минус этого способа — он заменит все текущие классы элемента на «wow».
Самое важное в этом способе — это его кроссбраузерность.
Если ваша задача состоит в том, чтобы изменить класс(-ы) для одного-двух элементов на странице, то лучше использоваться JavaScript, и забыть про jQuery, потому что вы лишь добавите весь странице и она станет медленнее грузиться.
jQuery
В jQuery все упрощенно до невозможности и работает кроссбраузерно.
Например, чтобы добавить класс «test7», нужно воспользоваться методом addClass():
$("myel").addClass("test7");
Чтобы удалить его, нужно использовать removeClass():
$("myel").removeClass("test7");
Если вы хотите заменить все классы на один единственный, то нужно использовать метод attr():
$("myel").attr("class", "test3 test4");
И теперь у «myel» будет только два класса, «test3» и «test4».
Вывод
А что вы используете чаще? JavaScript или jQuery?
Какой способом вам нравится больше всего и почему?
В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.
Управление классом (классами) элемента
Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className
. Данное свойство является отражением атрибута class
в DOM. DOM-свойство className
не было названо class
из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.
Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className
:
<p id="alert">...</p> <script> var elem = document.querySelector('#alert'); // добавим класс к элементу elem.className = 'alert'; // "alert" // изменим класс у элемента elem.className = 'alert-warning'; // "alert-warning" // получим значение класса и сохраним его в className var classElem = elem.className; // "alert-warning" // удалим класс у элемента elem.className = ""; // "" </script>
Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.
Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:
<p id="alert">...</p> <script> 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'); </script>
DOM-свойство className
и атрибут class
всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.
Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.
Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.
Пример, в котором проверим наличие у элемента класса content__show
:
<div id="content" class="content content__show">...</div> <script> var elem = document.querySelector('#content'); if ((' ' + elem.className + ' ').indexOf(' content__show ') > -1) { // у элемента есть класс content__show } else { // у элемента класса content__show нет } </script>
Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев 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" const 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')) { sideBar.classList.add('hidden-md'); }
Объект classList
является псевдомассивом, т.е. его можно перебрать как массив.
Пример, в котором переберём все классы classList
:
<div class="content col-12 col-sm-8 col-md-6">...</div> <script> 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[7]); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); } </script>
Свойство classList
поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.
Стили элемента
В DOM у каждого элемента есть свойство style
, с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.
Пример, как можно к элементу добавить стили через DOM-свойство style
:
<div class="square">Квадрат</div> <script> const square = document.querySelector('.square'); square.style.width = '170px'; square.style.height = '170px'; square.style.backgroundColor = 'green'; </script>
Имена свойств объекта 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 для установки стилей элементам.
<p id="introtext" style="font-weigth: bold;">...</p> <p>...</p> <p>...</p> <script> // установим элементу с 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]); } </script>
Свойство cssText
Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText
. Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style
.
Пример, в котором установим стили "font-size:40px; color:blue;"
элементам с классом intro
:
<p class="intro">...</p> <script> //получим все элементы с классом intro const introList = document.querySelectorAll('.intro'); //установим "font-size:40px; color:blue;" всем элементам в introList for (let i = 0, length = introList.length; i < length; i++) { introList[i].style.cssText = 'font-size:40px; color:blue;'; } </script>
При установке стилей с помощью свойства style.cssText
нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style
и в соответствующем ему DOM-свойстве.
Выполнить операцию, аналогичную той которую выполняет свойство style.cssText
, можно ещё через метод setAttribute
.
Например:
<p class="info">...</p> <script> //получим первый элемент с классом info const info = document.querySelector('.info'); //установим ему стиль "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute('style', 'margin: 10px; padding: 10px; border: 1px solid green;'); </script>
Задания
1. Написать скрипт, используя classList
, для установления элементу с классом text
трех классов: size-40
, color-red
и bg-yellow
:
<!-- СSS --> <style> .size-40 { font-size: 40px; } .color-red { color: red; } .bg-yellow { background: yellow; } </style> <!-- HTML --> <p class="text">Некоторый текст...</p>
2. Написать код для установления стиля "width: 180px; height: 180px;"
всем элементам на странице с классом, начинающимся со слов block-
.
В этом руководстве мы расскажем, как модифицировать DOM, изменяя стили, классы HTML-элементов с помощью JavaScript. Это даст лучшее понимание того, как управлять основными элементами в DOM.
- Обзор выбора элементов
- Изменение стилей
- Заключение
Библиотека jQuery упростила процесс выбора одного или нескольких элементов и применения изменений ко всем одновременно.
Напомним, что document.querySelector() и document.getElementById() — это методы, которые используются для доступа к одному элементу. Используя div с атрибутом id, мы можем получить доступ к этому элементу.
<div id="demo-id">Demo ID</div>
Метод querySelector() является более надежным. Он позволяет выбрать элемент на странице с помощью любого типа селектора.
// Оба метода возвращают единственный элемент const demoId = document.querySelector('#demo-id');
Получив доступ к элементу, можно изменить его отдельную часть. Например, текст, размещенный внутри него.
// Изменяем текст одного элемента demoId.textContent = 'Demo ID text updated.';
Но при доступе к нескольким элементам с помощью общего селектора, такого как определенный класс, нужно пройтись по всем ним. В приведенном ниже примере используются два элемента div с одинаковым значением атрибута class:
<div class="demo-class">Demo Class 1</div> <div class="demo-class">Demo Class 2</div>
Мы будем использовать метод querySelectorAll() для захвата всех элементов с классом demo-class. А также forEach() для их перебора и изменения.
Также к определенному элементу можно получить доступ с помощью querySelectorAll():
// Получаем NodeList всех элементов .demo const demoClasses = document.querySelectorAll('.demo-class'); // Изменяем текст нескольких элементов с помощью цикла demoClasses.forEach(element => { element.textContent = 'All demo classes updated.'; }); // Получаем доступ к первому элементу в NodeList demoClasses[0];
Свойства и методы, используемые в примерах, приведенных в этой статье, часто будут привязаны к прослушивателям событий. Благодаря им они смогут реагировать на клики, наведения курсора и другие действия пользователей.
Примечание: Методы getElementsByClassName() и getElementsByTagName() возвращают наборы элементов HTML, не имеющие доступа к методу forEach(). Он использует querySelectorAll(). В этих случаях необходимо применять стандартный цикл for для перебора набора.
Изменение атрибутов
Атрибуты — это значения, которые содержат дополнительную информацию об HTML-элементах. Чаще всего они состоят из пары имя / значение и могут применяться в зависимости от элемента. Полный список HTML- атрибутов смотрите в списке атрибутов .
К пользовательским элементам, которые не являются частью стандарта HTML, добавляется префикс data-.
В JavaScript доступно четыре метода изменения атрибутов элемента:
Метод | Описание | Пример |
hasAttribute() | Возвращает логическое значение true или false | element.hasAttribute(‘href’); |
getAttribute() | Возвращает значение указанного атрибута или null | element.getAttribute(‘href’); |
setAttribute() | Добавляет или обновляет значение указанного атрибута | element.setAttribute(‘href’, ‘index.html’); |
removeAttribute() | Удаляет атрибут из элемента | element.removeAttribute(‘href’); |
Создадим новый HTML-файл с тегом <img>, использующим один атрибут. В нем мы будем ссылаться на изображение, доступное через URL-адрес.
<!DOCTYPE html> <html lang="en"> <body> <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png"> </body> </html>
При загрузке созданной веб-страницы в браузере ее HTML-код будет выглядеть следующим образом:
Теперь протестируем все методы для обработки атрибутов.
// Назначаем элемент изображения const img = document.querySelector('img'); img.hasAttribute('src'); // возвращает true img.getAttribute('src'); // возвращает "...shark.png" img.removeAttribute('src'); // удаляет атрибут src и значение
Удалим атрибут src и значение, связанные с тегом <img>. Но можно сбросить этот атрибут и назначить ему другое изображение с помощью img.setAttribute():
img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
Также можно изменить атрибут напрямую, присвоив ему новое значение в качестве свойства элемента:
img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
Любой атрибут может быть отредактирован так же, как и с помощью описанных выше методов.
Методы hasAttribute() и getAttribute() используются с условными операторами. Методы setAttribute() и removeAttribute() также применяются для изменения структуры DOM.
Изменение классов
Атрибут class соответствует селектору класса CSS. CSS-классы используются для применения стилей к нескольким элементам. В отличие от идентификаторов, которые могут существовать на веб-странице только в единственном экземпляре.
В JavaScript есть свойства className и classList, предназначенные для работы с атрибутом class.
Метод / Свойство | Описание | Пример |
className | Получает или задает значение класса | element.className; |
classList.add() | Добавляет одно или несколько значений класса | element.classList.add(‘active’); |
classList.toggle() | Включает или отключает класс | element.classList.toggle(‘active’); |
classList.contains() | Проверяет, существует ли класс. | element.classList.contains(‘active’); |
classList.replace() | Заменяет существующее значение класса новым. | element.classList.replace(‘old’, ‘new’); |
classList.remove() | Удаляет значение класса. | element.classList.remove(‘active’); |
Создадим еще один HTML-файл для демонстрации перечисленных выше методов.
<!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <div>Div 1</div> <div class="active">Div 2</div> </body> </html>
После открытия файла classes.html в браузере вы увидите следующее:
Свойство className было введено для предотвращения конфликтов с ключевым словом class, которое используется в JavaScript. Вы можете использовать className, чтобы присвоить значение непосредственно классу.
// Выбираем первый div const div = document.querySelector('div'); // Присваиваем первому div класс warning div.className = 'warning';
Мы присвоили первому элементу div класс warning, определенный в CSS. Вы получите следующий результат:
Обратите внимание, что если какие-либо классы уже используются в элементе, это переопределит их. Можно добавить несколько классов, разделенных пробелом, используя свойство className.
Другой способ изменить классы – использовать свойство classList, которое включает в себя несколько полезных методов. Они похожи на JQuery-методы addClass, removeClass и toggleClass.
// Выбираем второй div по имени класса const activeDiv = document.querySelector('.active'); activeDiv.classList.add('hidden'); // Добавляем класс hidden activeDiv.classList.remove('hidden'); // Удаляем класс hidden activeDiv.classList.toggle('hidden'); // Переключаем hidden true и false activeDiv.classList.replace('active', 'warning'); // Заменяем активный класс классом warning
После выполнения указанных выше методов веб-страница будет выглядеть следующим образом:
Использование classList.add() добавит новый класс в список существующих. Также можно использовать setAttribute для изменения класса элемента.
Создадим простой пример для демонстрации изменения стилей элементов с помощью JavaScript. Ниже приведен новый HTML-файл. Он включает в себя div с несколькими встроенными стилями, применяемыми для отображения квадрата.
<!DOCTYPE html> <html lang="en"> <body> <div style="height: 100px; width: 100px; border: 2px solid black;">Div</div> </body> </html>
При открытии файла styles.html в браузере вы увидите следующее:
Один из вариантов редактирования стилей – использование метода setAttribute().
// Выбираем div const div = document.querySelector('div'); // Применяем к div стили div.setAttribute('style', 'text-align: center');
Но подобный подход удалит все существующие для элемента встроенные стили. Поэтому лучше напрямую использовать атрибут style:
div.style.height = '100px'; div.style.width = '100px'; div.style.border = '2px solid black';
Обратите внимание, что в методах JavaScript используется другие правила написания свойств CSS. Например, вместо text-align мы будем использовать textAlign.
// Преобразуем div в круг и центрируем текст вертикально div.style.borderRadius = '50%'; div.style.display = 'flex'; div.style.justifyContent = 'center'; div.style.alignItems = 'center';
После этого окончательный результат будет выглядеть следующим образом:
Если к элементу необходимо применить много стилей, то лучше назначить стили для класса и добавить новый класс. Но в некоторых случаях необходимо будет изменить атрибут встроенного стиля.
В этом руководстве мы рассказали, как получить доступ, изменить и удалить атрибуты HTML-элементов в DOM с помощью JavaScript. А также как добавлять и заменять CSS-классы элемента, редактировать встроенные CSS- стили. Для получения дополнительной информации ознакомьтесь с документацией по атрибутам от Mozilla Developer Network.
Improve Article
Save Article
Improve Article
Save Article
The class name is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to return the element in the document with the “id” attribute and the “className” attribute can be used to change/append the class of the element.
Syntax:
document.getElementById('myElement').className = "myclass";
Example 1: In this code change the class of the button from “default” to “changedClass” using the onclick event which in turn changes the background color of the button from RED to GREEN.
html
<
style
>
.default{
background-color: red;
}
.changedClass{
background-color: green;
}
</
style
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
>
Change class name of element
</
h2
>
<
button
class
=
"default"
onclick
=
"changeClass()"
id
=
"myButton"
>
Click Here!</
button
><
br
>
<
p
id
=
"myPara"
>
Old class name: default
</
p
>
<
script
>
function changeClass() {
document.getElementById('myButton')
.className = "changedClass";
var button_class = document.getElementById('myButton')
.className;
document.getElementById('myPara')
.innerHTML = "New class name: "
+ button_class;
}
</
script
>
</
body
>
Output:
Change an element class JavaScript
Example 2 : In this code changed the class of the button from “default” to “newclass1” and “newclass2” using the onclick event.
html
<
style
>
.default{
background-color: red;
}
.newclass1 {
color:white;
}
.newclass2 {
background-color:green;
}
</
style
>
<
body
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h2
>Change class name of element</
h2
>
<
button
class
=
"default"
onclick
=
"changeClass()"
id
=
"myButton"
>
Click Here!
</
button
>
<
p
id
=
"myPara"
>Old class name: default</
p
>
<
script
type
=
"text/javascript"
>
function changeClass() {
document.getElementById('myButton')
.className = "newclass1";
document.getElementById('myButton')
.classList.add("newclass2");
var button_class = document.getElementById('myButton')
.className;
document.getElementById('myPara')
.innerHTML = "New class name: "
+ button_class;
}
</
script
>
</
body
>
Output:
Change an element class JavaScript
Improve Article
Save Article
Improve Article
Save Article
The class name is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to return the element in the document with the “id” attribute and the “className” attribute can be used to change/append the class of the element.
Syntax:
document.getElementById('myElement').className = "myclass";
Example 1: In this code change the class of the button from “default” to “changedClass” using the onclick event which in turn changes the background color of the button from RED to GREEN.
html
<
style
>
.default{
background-color: red;
}
.changedClass{
background-color: green;
}
</
style
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
>
Change class name of element
</
h2
>
<
button
class
=
"default"
onclick
=
"changeClass()"
id
=
"myButton"
>
Click Here!</
button
><
br
>
<
p
id
=
"myPara"
>
Old class name: default
</
p
>
<
script
>
function changeClass() {
document.getElementById('myButton')
.className = "changedClass";
var button_class = document.getElementById('myButton')
.className;
document.getElementById('myPara')
.innerHTML = "New class name: "
+ button_class;
}
</
script
>
</
body
>
Output:
Change an element class JavaScript
Example 2 : In this code changed the class of the button from “default” to “newclass1” and “newclass2” using the onclick event.
html
<
style
>
.default{
background-color: red;
}
.newclass1 {
color:white;
}
.newclass2 {
background-color:green;
}
</
style
>
<
body
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h2
>Change class name of element</
h2
>
<
button
class
=
"default"
onclick
=
"changeClass()"
id
=
"myButton"
>
Click Here!
</
button
>
<
p
id
=
"myPara"
>Old class name: default</
p
>
<
script
type
=
"text/javascript"
>
function changeClass() {
document.getElementById('myButton')
.className = "newclass1";
document.getElementById('myButton')
.classList.add("newclass2");
var button_class = document.getElementById('myButton')
.className;
document.getElementById('myPara')
.innerHTML = "New class name: "
+ button_class;
}
</
script
>
</
body
>
Output:
Change an element class JavaScript