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

210

27 декабря 2017, 18:56

Есть элемент

.test { 
  --var-width: 100px; 
  width: var(--var-width); 
}

<div class="test">текст</div>

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

Answer 1

Вот так:

элемент.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; /* для наглядности */ 
}

<div class="test">100</div> 
Выберите ширину:<br/> 
<input type="range" min="10" max="300" value="100" id="rng" />

Answer 2

Здравствуйте,через element.style.width="100px",но лучше задайте дополнительный класс,опишите в нем изменения,а через js просто переключайте с помощью elem.classList.toggle

update.

document.querySelector('.test').style.setProperty('--var-width', '200px');
document.querySelector('.test').style.cssText = "--var-width: 200px";
document.querySelector('.test').setAttribute("style", "--var-width: 200px");

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Меняется value в зависимости от выбора

Есть yandex форма для оплатыПытаюсь сделать так что бы при выборе банковская карта или яндекс деньги в форме менялся value="Имя платежа"

222

CSS

Маленький вопрос по смене шрифта

Всем привет! Есть простой JS-скрипт: http://imaporu/%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82-%D0%BC%D0%B0%D1%82%D1%80%D0%B8%D1%86%D1%8B-%D1%81-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC-html5-canvas/...

181

CSS

Верстка и позиционирование div-блоков

Добрый день подскажите пожалуйста как сверстать div'ы таким образом:

181

CSS

Как подключить CSS из HTML документа?

Возможно ли ссылаться на элемент в HTML документе при подключении CSS во фрейме или окне, открытом через windowopen (не копируя сам текст из <style>)...

178