Как добавить css стиль к html элементу через js?
На странице имеется такой элемент. Как через js добавить к нему css?
<div aria-expanded="true" data-modal="_dynamic_modal_0" class="v--modal-overlay scrollable">
Ответы (1 шт):
Автор решения: Teslajke
→ Ссылка
Получаем элемент, затем добавляем ему класс. Обратите внимание, что название примера класса во второй строчке кода указывается без точки.
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 синтаксисе. Обратите внимание на то, какие именно кавычки используются для записи.