Изменение переменных в CSS используя javascript
253
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");
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49911 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31901 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25874 visits
- Как через css изменить цвет png изображения? 11721 visits
- Blob video url download 11267 visits
- Php curl запрос через прокси с авторизацией 10662 visits
- Работа с captcha vk api 9470 visits
© "hostciti.net" 20.12.2025 | 01:48