Как добавить класс в html через js
Для работы со стилевыми свойствами элементов в JavaScript применяются, главным образом, два подхода:
- Изменение свойства style
- Изменение значения атрибута class
Свойство style
Свойство style представляет сложный объект CSSStyleDeclaration и напрямую сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS, к которым можно обратиться следующим образом:
element.style.свойствоCSS
Например, установим цвет шрифта заголовка:
METANIT.COM Home Page
Здесь для заголовка в качестве цвета устанавливаем синий цвет navy. В данном случае название свойства color совпадает со свойством css. Аналогично мы могли бы установить цвет с помощью css:
#header
Однако ряд свойств css в названиях имеют дефис, например, font-family . В JavaScript для этих свойств дефис не употребляется. Только первая буква, которая идет после дефиса, переводится в верхний регистр:
const header = document.getElementById("header"); header.style.fontFamily = "Verdana";
Свойство className
С помощью свойства className можно получить или установить значение атрибута class элемента html. Например:
METANIT.COM .header-color .header-fontHome Page
Здесь получаем текущий класс заголовка и затем изменяем его на новый класс — «header-color». Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства style .
Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом:
header.className = header.className + " header-color";
И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:
header.className = "";
Свойство classList
Выше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList . Это свойство представляет объект, реализующий следующие методы:
- add(className) : добавляет класс className
- remove(className) : удаляет класс className
- toggle(className) : переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется
METANIT.COM .header-color .header-font .header-sizeHome Page
Стоит отметить, что метод toggle() дополнительно может принимать условие в качестве второго параметра — если это условие верно (возвращает true ), то класс переключается:
const i = 5; const condition = i > 0; // условие const header = document.getElementById("header"); header.classList.toggle("header-color", condition); // переключаем класс header-color по условию
При необходимости мы можем перебрать все классы из списка classList или получить отдельные классы по индексу:
// перебор списка классов for(headerClass of header.classList) < console.log(headerClass); >console.log(header.classList[0]); // первый установленный класс
Курсы javascript
Правильно ли я понял, что 2-й вариант работает не на всех браузерах, только на новых, и лучше воспользоваться первым?
Последний раз редактировалось newobject, 20.07.2014 в 22:21 .
20.07.2014, 22:38
Регистрация: 27.05.2010
Сообщений: 33,039
а типа в учебник заглянуть — это не по пацански
20.07.2014, 22:54
Регистрация: 30.04.2013
Сообщений: 92
newobject,
я новенькая в этом деле но все же)))
я делаю это так
если есть основной блок
$(".osnovnoy-div(название class или id основного дива) div(или за место div любой другой элемент span или что то свое)[id*=id-esli-est'']").addClass('new-name-class').html();
как выглядит это
после как скрипт обработает
Строго не судите пожалуйста я только учусь))
20.07.2014, 23:35
Регистрация: 10.07.2014
Сообщений: 145
рони,
Спасибо огромное за ответ. Я просто думаю: а нахрен нужны эти извраты с эмуляцией и прочим, если первый вариант работает везде и без костылей? Или не везде?
21.07.2014, 00:36
Регистрация: 19.01.2010
Сообщений: 354
ClassList — удобный интерфейс для работы со списком классов. Например, у тебя никогда не случиться такого:
Добавление класса — пол-дела, при помощи ClassList можно удобно удалять класс, делать toggle и проверять наличие заданного класса. Попробуй написать однострочники для всего указанного и поймешь нахрена оно надо.
« — слайдер | document.getElementById(‘qwe’) перевести $(‘#qwe’) »
| Похожие темы |
| Тема | Автор | Раздел | Ответов | Последнее сообщение |
| Как добавить методы объекту после конструирования. | DragorWW | Общие вопросы Javascript | 23 | 21.01.2013 19:39 |
| хотел как лучше, а получилось как всегда. Вопрос оптимизации | 9xakep | Общие вопросы Javascript | 13 | 21.01.2013 16:27 |
| помогите добавить class/id элементу | magnateg | Events/DOM/Window | 39 | 19.11.2011 22:41 |
| Как добавить свой блог в раздел feeds этого сайта | IzumeRoot | Ваши сайты и скрипты | 13 | 30.10.2008 21:11 |
| Добавить контент к последнему элементу | Viper | jQuery | 0 | 11.10.2008 20:04 |
Как добавить класс к заданному элементу в JavaScript
Если вы хотите добавить класс к элементу HTML, не заменяя его существующий класс, вы можете сделать, как показано в следующем примере:
Add Class to an Element Using JavaScript .content < padding: 20px; border: 2px solid #ccc; >.highlight This is a paragraph of text.
В приведенном выше примере функция addNewClass() добавляет нового класс highlight к элементу DIV, у которого уже есть класс box , без его удаления или замены с помощью свойства className .
Кроме того, вы также можете использовать свойство classList для добавления / удаления классов у элемента, например:
Important piece of information! Свойство classList поддерживается во всех современных браузерах. Не поддерживается в IE до версии 10.
Читайте также
Похожие примеры:
- Как получить элемент по имени класса в JavaScript
- Как динамически добавлять CSS-свойства к элементу с помощью jQuery
- Как добавить атрибуты к элементу HTML в jQuery
Добавить класс элементу JS с условием
Как добавить класс элемнету если таковых на странице меньше двух или трех. Например есть:
Все имеют ширину:
width: 33.333% Есть страницы на которых выводится только два или один блок, получается не очень красиво выглядит. Есть ли на jQuery решение позволяющее задать условие, что если элементов меньше чем 3 то добавляется дополнительный класс, содержащий например:
width: 50%; Или если элемент .products только один, ему присваивается класс содержащий:
width: 50%; margin: 0 auto; Описал стили для наглядности задачи.