Как добавить css стиль к html элементу через js?

Рейтинг: -1Ответов: 1Опубликовано: 10.06.2023

На странице имеется такой элемент. Как через js добавить к нему css?

<div aria-expanded="true" data-modal="_dynamic_modal_0" class="v--modal-overlay scrollable">
javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Получаем элемент, затем добавляем ему класс. Обратите внимание, что название примера класса во второй строчке кода указывается без точки.

const myModal = document.querySelector(".v--modal-overlay")
    
myModal.classList.add("class")

Второй вариант - inline css:

let myModal = document.querySelector(".v--modal-overlay")

myModal.style.marginBottom = '100px'

Обратите внимание на то, как записан параметр marginBottom . Именно таким образом нужно обращаться к параметрам стиля через JS.

Вот 3-й вариант, если хотите использовать привычную запись параметров css:

let myModal = document.querySelector(".v--modal-overlay")

myModal.style.cssText = `
color: red;
margin-bottom: 100px;
`

Здесь вы можете перечислить сразу несколько параметров в привычном для css синтаксисе. Обратите внимание на то, какие именно кавычки используются для записи.