我正在制作一个动态响应广告,该广告具有各种媒体规则来说明不同的可能广告尺寸。根据页面的大小,将显示不同的内容。
如果显示特定元素的媒体规则处于活动状态,我已经设置了一些 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 时,如果不显示价格,则背景颜色由灰色变为蓝色,字体大小会增加。
我只是想弄清楚如果媒体规则发生变化并且原始条件不再正确,如何重置计算的样式。
非常感谢任何见解。