Изменение переменных в 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"); Как изменить переменные SCSS c помощью JS?
Можно загонять данные при сборке Gulp-ом. Библиотеку не помню только.
Но при беглом гуглении нашел вот это.
В режиме же реального времени прорисовки браузером никак.
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
SidneyMur @SidneyMur Автор вопроса
Было такое в мыслях тоже, но везение что большая часть переменных была модулем, и устранил проблему ответом выше, как заметил это самый лучший исход
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
Как сделать append блока в правильном месте?
- 1 подписчик
- 17 минут назад
- 18 просмотров
- HTML
- +1 ещё
Почему фоновая картинка то пропадает, то появляется?
- 1 подписчик
- час назад
- 20 просмотров
Как получить и установить значения переменных 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 с помощью CSS-переменных
Одно из самых серьёзных противостояний в мире веб-разработки – CSS против JavaScript. У обоих есть свои достоинства, собственный синтаксис и идеи, иногда понять их может быть непросто. Но есть способы заставить их общаться и использовать достоинства каждого.
С позиции JavaScript для установки различных CSS-свойств HTML-элементу, требуется найти его в DOM и получить доступ к нему. После добавления стилей, у этого элемента появляется атрибут style , который вы не стали бы, наверное, писать вручную.
Ещё один способ доступа к CSS-свойствам из JavaScript – использовать настраиваемые CSS-свойства, они также известны, как «CSS-переменные» (CSS variables), которые можно определять с помощью синтаксиса — . Так:
:root < --pagebackground: powderblue; >body
Это «переменные», поэтому их можно неоднократно использовать в таблице стилей.
Получить к ним доступ и управлять значениями этих переменных можно с помощью JavaScript. В этом примере настраиваемое CSS-свойство устанавливается для корневого элемента документа. Его можно прочитать так:
let bg = getComputedStyle(document.documentElement). getPropertyValue('--pagebackground');И его можно установить с помощью JavaScript, получив доступ к стилю корневого элемента (или вообще любого другого элемента с настраиваемыми свойствами), так:
document.documentElement.style.setProperty('--pagebackground', 'firebrick');Но самое выдающееся во всей этой истории то, что используя возможности JavaScript, можно предоставить CSS то, к чему он не может получить доступ. Например, CSS не может прочитать координаты курсора мыши, а JavaScript может.
Для начала, в CSS надо определить пару свойств —mouse-x и —mouse-y , а также установить им начальные значения – 0 :
:root
Затем, в JavaScript следует добавить документу обработчик mousemove . Тогда при движении курсора можно получать его координаты и управлять этими двумя CSS-свойствами с помощью JavaScript:
let root = document.documentElement document.addEventListener('mousemove', e => < root.style.setProperty('--mouse-x', e.x); root.style.setProperty('--mouse-y', e.y); >);В-общем, дело нехитрое. Поскольку настраиваемые CSS-свойства реагируют на движение мыши и изменяют свое значение, теперь можно, например, показать кружок и заставить его двигаться вслед за курсором, так:
:root < --mouse-x: 0; --mouse-y: 0; >#ball
Здесь некоторые пояснения к CSS:
- ширина и высота DIV установлены равными 20 пикселей, а фон – белый
- добавление border-radius: 100% гарантирует, что из квадрата получится круг.
- затем используется transform: translate , чтобы позиционировать круг на экране. Это может быть что-то вроде transform: translate (200px, 300px) , чтобы расположить наш шар на 200 пикселей по горизонтали и 300 пикселей по вертикали относительно левого верхнего угла.
- поскольку JavaScript возвращает для настраиваемого CSS-свойства числовое значение, его необходимо преобразовать в пиксели, умножив на 1px .
- так как размер шара составляет 20 пикселей, то чтобы поместить его центр в точки —mouse-x и —mouse-y , нужно вычесть из координат 10.
Этот трюк позволяет выполнять сложные вычисления, считывать состояние браузера и внешнее взаимодействие с ним в JavaScript, затем передавать результат в CSS и изменять его.