Как добавить класс в html через js
Перейти к содержимому

Как добавить класс в html через js

  • автор:

Как добавить класс к элементу js?

Для добавления в элемент класса существует метод classList.add() . В качестве параметра он принимает имя класса, который нужно добавить. Ещё существует простой способ задать классы элементу через свойство className через обычное присваивание. Имена классов должны разделяться пробелами.

const div1 = document.createElement('div'); div1.className = 'foo'; console.log(div1.outerHTML); // => const div2 = document.createElement('div'); div2.className = 'foo bar'; console.log(div2.outerHTML); // => const div3 = document.createElement('div'); div3.classList.add('foo'); console.log(div3.outerHTML); // => const div4 = document.createElement('div'); div4.classList.add('foo', 'bar', 'baz'); console.log(div4.outerHTML); // => 

Как добавить класс к текущей странице

Необходимо чтобы при переходе со страницы на страницу класс current добавлялся на текущую страницу. При этом убирался со страницы, которая уже закрыта. Как это сделать с помощью JS?

Отслеживать
51.6k 200 200 золотых знаков 59 59 серебряных знаков 242 242 бронзовых знака
задан 13 сен 2022 в 20:36
1 1 1 бронзовый знак
13 сен 2022 в 21:19

Наверное я не совсем понятно задал вопрос. Необходимо чтобы при переходе со страницы на страницу класс current добавлялся на текущую страницу. При этом убирался со страницы, которая уже закрыта. Как это сделать с помощью JS ?

14 сен 2022 в 6:56

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вы можете использовать ссылку на вашу страницу как опору, но вы должны будете для каждой ссылке добавить id которое будет названия файла на который ведёт ссылка.
Вот пример:

let href = window.location.href; let currentPage = href.substring(href.lastIndexOf('/') + 1).replace('.html', '') ?? 'undefined'; let currentPageLink = document.querySelector('#' + currentPage); if (currentPageLink)

Добавляем класс элементу с помощью classList.add

Мы отключили светлую тему, и страница сразу потускнела. Теперь нужно включить тёмную тему, добавив элементу page класс dark-theme . Для этого воспользуемся методом classList.add :

элемент.classList.add('класс');

Этот метод добавляет элементу класс, указанный в скобках.

JavaScript выполняет инструкции последовательно, сверху вниз. Вот что произойдёт, когда мы добавим инструкции и запустим наш скрипт:

При этом, если вы заглянете в index.html , то увидите, что ничего не изменилось: класс light-theme по-прежнему на месте, а dark-theme отсутствует. Почему так? Дело в том, что скрипт не меняет исходный файл с разметкой, но, выполняя инструкции, меняет страницу прямо в браузере пользователя.

Убедимся в этом!

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  • script.js Сплит-режим

FlashNews!

На главную

email

Новая библиотека для создания графиков

Теперь вы можете создать дашборд за считанные секунды.

Что там у роботов?

В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.

Как добавить класс в html через js

Какой-то из тегов — пусть это будет div

Чтобы не быть скучным. будем добавлять класс по нажатию на кнопку button

Для того, чтобы добавить класс надо одним из способов обратиться к тегу, если это id, то сделать это можно написав значение атрибута «id», далее. + «точка» добавляем «свойство/метод с помощью которого будем добавлять класс» + «равно(=)» и название класса, который будем создавать/добавлять

add_class_in_div . className = ‘example_class’

Кнопка полностью в сборе:

Нам нужны стили добавляемого класса, чтобы мы могли увидеть, что класс добавлен!

Соберем весь код:

Код добавления класса с помощью кнопки:

Выведем весь код описанный выше:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *