Как изменить переменную css через js

 --Добавим стилей для элемента которые будем менять--> .box  width: 75px; height: 75px; background-color: #444; >   class="box">

в секции со скриптами HTML документа, надо добавить определение указанных функций на кнопках со следующей логикой:

cоnst chаngeColor = () =>  // Выбираем элемент на странице, получаем доступ к списку стилей и меняем нужному значение. documеnt.getElementsByClassName('box')[0].stylе.backgroundColor = "#38d9a9"; > cоnst аddWidth = () =>  documеnt.getElementsByClassName('box')[0].stylе.width = "175px"; > 

Как получить значения CSS переменных с помощью JavaScript

Пользовательские свойства CSS удобны для создания настраиваемых компонентов и стилей CSS. Но сфера их применения этим не ограничивается. Используя пользовательские свойства, можно обрабатывать информацию в JavaScript.

В прошлом, чтобы получить текущую контрольную точку без запроса ширины окна я делал что-то подобное:

Обновлено: 2023-06-04 19:38:45 Ангелина Писанюк автор материала

CSS:

body::before < content: 'mobile'; display: none; >@media screen and (min-width: 30rem) < body::before < content: 'large-mobile'; >> @media screen and (min-width: 70rem) < body::before < content: 'desktop'; >>

JavaScript:

function getBreakpoint() < return getComputedStyle(document.querySelector('body'), ':before') .getPropertyValue('content') .replace(/"/g, ''); >

Данный подход хорошо справляется со своей задачей. Но пользовательские свойства CSS обладают большей гибкостью.

Функция getCSSCustomProp

Мне нужно было посмотреть, поддерживается ли Scroll Snap в моем компоненте JavaScript. Потом я понял, что CSS может предоставить решение для этого вопроса.

Я установил значение по умолчанию для компонента следующим образом:

.my-component

Потом, используя @supports , можно сделать следующее:

@supports (scroll-snap-type: x mandatory) < .my-component < --supports-scroll-snap: 1; >>

Затем JavaScript обрабатывает полученные данные:

const myComponent = document.querySelector('.my-component'); const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');

Все это работает благодаря приведенной ниже функции:

/** * Передаем элемент и его пользовательские свойства, значение которого нам необходимо. * Мы можем определить, какой тип данных получим в итоге. * * @param propKey * @param element=document.documentElement * @param castAs='string' * @returns */ const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => < let response = getComputedStyle(element).getPropertyValue(propKey); // Если нужно, приводим в порядок строку if (response.length) < response = response.replace(/"/g, '').trim(); >// Преобразуем возвращаемые данные в любой желаемый тип switch (castAs) < case 'number': case 'int': return parseInt(response, 10); case 'float': return parseFloat(response, 10); case 'boolean': case 'bool': return response === 'true' || response === '1'; >// Возвращаем результат return response; >;

Заключение

Этот метод отличается от того, что я использовал для точек остановки в body . Основное отличие состоит в том, что мы передаем реальные свойства, а не скрываем значения. Так код стал намного чище.

Можете взять эту функцию из Gist, и, надеюсь, когда-нибудь она вам пригодится.

Как получить и установить значения переменных CSS с помощью JavaScript

Переменные CSS являются очень приятным дополнением к языку, несмотря на то, что они невероятно просты. Конечно, мы могли бы использовать SASS или стилус, но языки никогда не должны рассчитывать на разработчиков, полагающихся на фреймворки и инструментальные средства, чтобы выполнить то, что нам нужно. И точно так же, как и любая другая часть веб-страницы, вы можете получать и изменять значения переменных CSS — давайте посмотрим, как это сделать!

Установка и использование CSS переменных

Традиционный метод использования собственных переменных CSS добавляет его в root:

:root

Получение значения переменной CSS

Чтобы получить значение переменной CSS в окне, мы будем использовать методы getComputedStyle и getPropertyValue:

getComputedStyle(document.documentElement) .getPropertyValue('--my-variable-name'); // #999999

Значение вычисленной переменной возвращается в виде строки.

Установка значения переменной CSS

Чтобы установить значение переменной CSS с использованием JavaScript, мы будем использывать свойство setProperty для стиля documentElement:

document.documentElement.style .setProperty('--my-variable-name', 'pink');

Вы сразу увидите новое значение, применяемое везде, где используется переменная.

Изменение переменных в CSS используя javascript

Как изменить значение переменной —var-width с помощью JS (или jquery)?

Отслеживать

123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака

задан 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

13k 10 10 золотых знаков 41 41 серебряный знак 78 78 бронзовых знаков

Здравствуйте,через 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");