Как немедленно обновить вычисляемые стили, когда применяется новое медиа-правило? - PullRequest
Новая
       60

Как немедленно обновить вычисляемые стили, когда применяется новое медиа-правило?

0 голосов
/ 29 января 2019

Я работаю над динамически реагирующим объявлением, в котором есть различные правила для мультимедиа, чтобы учесть разные возможные размеры рекламы.В зависимости от размера страницы будет отображаться различное содержимое.

Я установил некоторые условия JS, которые будут применять разные стили, когда цены отсутствуют, если медиа-правило, показывающее определенный элемент, активно.

Это прекрасно работает, если размер страницы не изменился после загрузки.Когда ширина страницы достаточно изменена, активируйте другое правило мультимедиа, стили JS из старого правила мультимедиа все еще остаются, чего я не хочу.

Вот очень упрощенный / общий пример: 

var item = document.getElementById("item");
var itemPrice = document.getElementById("price");
var itemIntro = document.getElementById("intro");
var priceDisplayValue = itemPrice.style.display;
var introAlpha = window.getComputedStyle(itemIntro).getPropertyValue("opacity");

if ((introAlpha == "1") && priceDisplayValue == "none") {
  item.style.background = "#0099cc";
  itemIntro.style.fontSize = "3em";
}
.ad{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ccc;
  font-size: 2em;
  text-align: center;
  color: #333;
}

.item{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #AAA;
}

#intro {
  opacity: 0;
}

@media (min-width: 600px){
  #intro{
    opacity: 1;
  }
}
<div class="ad">
  <div class="item item1" id="item">
    <p class="intro" id="intro">Item1 intro text</p>
    <p class="price" id="price" style="display: none;">Price</p>
    <p class="details" id="details">Learn more</p>
  </div>

</div>

Если страница шире 600px, если цена не отображается, цвет фона меняется с серого на синий и размер шрифта будетувеличение.

Я просто пытаюсь выяснить, как сбросить вычисленные стили, если правило мультимедиа изменяется и исходное условие больше не выполняется.

Любое понимание очень ценится.

...