1

我正在制作一个动态响应广告，该广告具有各种媒体规则来说明不同的可能广告尺寸。根据页面的大小，将显示不同的内容。

如果显示特定元素的媒体规则处于活动状态，我已经设置了一些 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 时，如果不显示价格，则背景颜色由灰色变为蓝色，字体大小会增加。

我只是想弄清楚如果媒体规则发生变化并且原始条件不再正确，如何重置计算的样式。

非常感谢任何见解。

4

0 回答 0