Как добавить класс к элементу 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 Сплит-режим