Замените Javascript свойство 'var' css после того, как оно уже установлено - PullRequest
Новая
       46

Замените Javascript свойство 'var' css после того, как оно уже установлено

2 голосов
/ 12 марта 2020

У меня есть элемент со свойством var, установленным на него следующим образом: 

 <div class="divwithbackground" style="--page-header-section-background: url('myurlimage.jpg');">
 </div>

CSS

 .divwithbackground::after {
     background-image: var(--page-header-section-background);
     background-position: center;
     background-size: cover;
 }

Это на самом деле хорошо работает. Но что, если у меня есть еще один javascript, который устанавливает свойство: 

document.documentElement.style.setProperty('--page-header-section-background', bgDataValue, 'important');

таким образом. Ну, это работает, если я уберу стиль из тега DIV: 

 style="--page-header-section-background: url('myurlimage.jpg');

Но это не то поведение, которое мне нужно. Я бы хотел javascript заменить уже установленное свойство. Это возможно?

1 Ответ

0 голосов
/ 12 марта 2020

Вам нужно либо настроить таргетинг на сам элемент, чтобы переопределить переменную 

setTimeout(function() {
document.querySelector('.divwithbackground').style.setProperty('--b', 'linear-gradient(blue,blue)');
},1500);
.divwithbackground::after {
  content: "";
  display: block;
  height: 50px;
  background-image: var(--b);
}
<div class="divwithbackground" style="--b: linear-gradient(red,red);">
</div>

Или рассмотрите запасной прием, если вы хотите нацелиться на элемент root: 

setTimeout(function() {
document.documentElement.style.setProperty('--b', 'linear-gradient(blue,blue)');
},1500);
.divwithbackground::after {
  content: "";
  display: block;
  height: 50px;
  background-image: var(--b,var(--c));
}
<div class="divwithbackground" style="--c: linear-gradient(red,red);">
</div>

Вы также можете установить / сбросить начальное значение так, как вы хотите: 

function change() {
  document.documentElement.style.setProperty('--b', 'linear-gradient(blue,blue)');
}

function reset() {
  document.documentElement.style.setProperty('--b', 'initial');
}
.divwithbackground::after {
  content: "";
  display: block;
  height: 50px;
  background-image: var(--b, var(--c));
}
<div class="divwithbackground" style="--c: linear-gradient(red,red);">
</div>

<button onclick="change()">change</button>
<button onclick="reset()">reset</button>

Дополнительные вопросы / ответы для получения более подробной информации:

Как хранить наследуемое значение в пользовательском свойстве CSS (иначе CSS переменные)?

CSS пользовательские свойства (переменные) для блочной модели

CSS пользовательское свойство в области игнорируется когда используется для вычисления переменной во внешней области видимости

...