Изменение переменных в CSS используя javascript
Как изменить значение переменной —var-width с помощью JS (или jquery)?
Отслеживать
124k 24 24 золотых знака 131 131 серебряный знак 312 312 бронзовых знаков
задан 26 дек 2017 в 12:04
324 3 3 серебряных знака 15 15 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
элемент.style.setProperty('--переменная', 'значение'); var test = document.querySelector('.test'); var rng = document.getElementById('rng'); rng.onchange = rng.oninput = function() < test.style.setProperty('--var-width', this.value + 'px'); test.textContent = this.value; >;.test < --var-width: 100px; width: var(--var-width); background-color: red; /* для наглядности */ >100 Выберите ширину:
Отслеживать
ответ дан 26 дек 2017 в 12:46
13.2k 10 10 золотых знаков 43 43 серебряных знака 79 79 бронзовых знаков
Здравствуйте,через element.style.width=»100px» ,но лучше задайте дополнительный класс,опишите в нем изменения,а через js просто переключайте с помощью elem.classList.toggle
document.querySelector('.test').style.setProperty('--var-width', '200px'); document.querySelector('.test').style.cssText = "--var-width: 200px"; document.querySelector('.test').setAttribute("style", "--var-width: 200px"); Доступ к CSS-переменным и их изменение с помощью Javascript
SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.
Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)
Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).
Давайте рассмотрим детально.
CSS
:root < --footer-color: #2cba92; /* @reasonCode зеленый */ --palatte-padding-left: 0px >footer < width: 50px; height: 50px; margin-top: 20px; margin-left: var(--palatte-padding-left); /* 11 */ background-color: var(--footer-color); /* 12 */ border-radius: 15px; >
О CSS-псевдоклассе :root можно прочесть на MDN и W3Schools (англ. яз.) Цитата с MDN:
CSS-псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент и идентичен селектору по тегу html, но его специфичность выше.
Мы определили CSS-переменные в селекторе :root . В строках 11-12 видно их использование. По стандарту CSS, переменная задается и используется с помощью префикса «—» .
HTML
Обратим внимание на атрибуты ползунка — элемента формы input с type=”range” . Они содержат минимальное ( min ) и максимальное ( max ) значения, а также исходное значение для value . Также посмотрим на поле выбора цвета — элемент формы input с type=”color” . Для него исходный цвет задан атрибутом value=»#2cba92″ .
Javascript
const footer = document.querySelector('footer') // 1 const inputs = [].slice.call(document.querySelectorAll('input')); // 2 inputs.forEach(input => input.addEventListener('change', handleUpdate)); // 4 inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); // 5 function handleUpdate(e) < // 7 if (this.type === 'color') < footer.style.setProperty('--footer-color', this.value) >else < footer.style.setProperty('--palatte-padding-left', this.value + 'px') >>
1 — получили элемент footer ,
2 — получили коллекцию NodeList со всеми элементами input на странице,
4 — добавили метод EventListener для события CHANGE,
5 — добавили метод EventListener для события MOUSEMOVE (обновляет динамический отступ у ползунка),
7 — функция для установки значения нужной CSS-переменной (обратим внимание, что мы добавили “ px ” к переменной с отступом margin в строке 11).
Вот и всё про доступ к CSS-переменным и их изменение с помощью Javascript. Делитесь своим мнением, задавайте вопросы и, пожалуйста, читайте нас в Твиттере.
P.S. Это тоже может быть интересно:
- Голограммы, пленочные засветки и шейдеры на чистом CSS
- Псевдокласс :has() — не только «родительский селектор»
- CSS-выражения от контейнера для дизайнеров
Если вам понравилась статья, поделитесь ей!
Взаимодействие между Javascript и CSS с помощью CSS-переменных
На 2016 г. CSS-переменные полностью работоспособны в Chrome и Firefox, у IE тоже в планах реализовать их.
Как часто бывает с новинками JavaScript и CSS, не сразу удается представить себе, для чего CSS-переменные могут пригодиться. Для большинства из нас эти переменные — что-то новое и непривычное, так что не всегда очевидно, к чему их применить. Но мы нашли замечательный ответ — взаимодействие между Javascript и CSS.
Что такое CSS-переменные?
CSS-переменные (см. спецификацию) добавляют в CSS два новых понятия. Отныне можно определять собственные свойства, начинающиеся с двойного дефиса ( — ):
html
А затем использовать их с помощью var():
Для всех, кто знаком с SASS или подобным языком, компилирующимся в CSS, преимущества этого очевидны, можно запросто менять цвета, размеры и т.п. всего в одном месте.
Что интересно, переменные подчиняются тем же правилам наследования, что другие CSS-свойства. Например, вдруг мы решили поэкспериментировать с основным цветом нашего блога:
.blog-post
Все ссылки внутри той части страницы, что относится к записи в блоге, окажутся страшноватого коричневого оттенка.
CSS-переменные просто великолепно сочетаются с выражением calc() :
html < --header-height: 40px >.page-content
CSS-переменные и JavaScript
Недавно мы натолкнулись на полифил для ползунка, который написала Лиа Веру, с интересным примером использования CSS-переменных для связи между JavaScript и CSS.
Исторически единственным способом управлять стилями переменной или функцией из JavaScript было, по сути, писать CSS в самом скрипте:
myElement.style.height = height + 'px'
Не так уж редко случается отказываться от отдельного CSS вообще и просто писать стили в JS:
var newStyles = document.createElement('style') document.head.append(newStyles) newStyles.innerHTML = ".my-element "
CSS-переменные позволяют делать намного лучше, возьмем тот же пример:
.my-element
Тогда в JavaScript можно прописать эту переменную именно для нашего элемента:
myElement.style.setProperty('--element-height', height + 'px')
Если исхитриться, можно обойтись и без конкатенации:
.my-element
myElement.style.setProperty('--element-height', height)
Можно даже определить в CSS значение по умолчанию, которое потом переопределится скриптом:
html < /* переопределится в JS */ --element-height: 20px >
Теперь можно аккуратно передавать информацию между JavaScript и стилями. Ну разве это не потрясающе?
Вот готовый пример, с которым можно поиграть:
P.S. Это тоже может быть интересно:
- CSS-выражения от контейнера для дизайнеров
- «Запашки» кода React-компонентов
- Как читать W3C-спецификации
Если вам понравилась статья, поделитесь ей!
Как изменить свойство класса css через js
Для изменения уже определенного значения одного из свойств css-класса элемента, можно воспользоваться следующим примером:
Исходный HTML документ
--Добавим стилей для элемента которые будем менять--> .box width: 75px; height: 75px; background-color: #444; > class="box">