Javascript 根据媒体查询将不同样式应用于同一元素答案

【问题标题】：Javascript apply different styles to same element based on media queryJavascript 根据媒体查询将不同样式应用于同一元素
【发布时间】：2020-03-03 06:33:22
【问题描述】：

使用 javascript，是否可以在 CSS 媒体查询中单独更改元素的样式？

特别是我们有一个主图，它根据屏幕大小使用两个不同的图像。我们正在编写一个页面加载脚本，该脚本加载下一页的可见内容，而不更改网页的静态部分。在下一次加载页面时，我们希望在每次加载新页面内容时都用新图像更改这两个值。

// code when page initially loaded    
#splash {
  background-image: url("1st-phone-img.jpg");
}
@media only screen and (min-width: 501px) {
  #splash {
    background-image: url("1st-fullsize-img.jpg");
  }
}

// when page 2 content loaded, need to change css to use two new images
#splash {
  background-image: url("2nd-phone-img.jpg");
}
@media only screen and (min-width: 501px) {
  #splash {
    background-image: url("2nd-fullsize-img.jpg");
  }
}

我知道我可以通过 document.getElementById('splash').style.backgroundImage = "url(2nd-phone-img.jpg)'; 进行基本定位，但是有没有办法用不同的图像定位 501px + 值？

或者我是否需要针对 <style></style> 标签内的所有内容进行文本替换（如果可能的话）？

--- 编辑更多信息 ---

我很抱歉，但我不是程序员，只是为我的小企业维护一个网站的人，显然没有清楚地解释我的问题。

我相信我们正在做的一个术语是页面水合作用。我们正在加载一个静态 html 页面，然后不是重新加载整个下一页，而是使用 javascript 来获取更改的内容并替换它，同时从加载的第一个页面保留框架、页脚、导航等。

发生的一个变化是主图像，如上所示，根据设备使用两个不同的图像。我需要更改两个 CSS 背景图像，因为一些设备交叉，垂直它们使用手机图像，水平它们使用完整图像。

- - - 再解释一下 - - -

我有一个 div，它使用两个不同的背景图像，通过 CSS 根据设备宽度确定。使用 vanilla javascript 并在页面加载后，我希望能够更改两个背景图像 url 值。使用 style.backgroundImage 只会更改当前可见的图像，而不是访问者更改平板电脑方向时要使用的替代图像。

【问题讨论】：

很不清楚你在问什么......你愿意把"fullsize-img.jpg"改成"fullsize-alternative-img.jpg"吗？如果是这样，您需要什么浏览器支持？对于最新的浏览器来说，css 变量是可行的，但如果你需要 IE，那么它可能会更难。
看看this fiddle，它告诉你如何使用CSS变量。

标签： javascript css media-queries

【解决方案1】：

如果您想要根据屏幕大小使用不同的图像，那么媒体查询是您的最佳选择。

@media only screen and (max-width: 500px)
    #splash {
      background-image: url("phone-img.jpg");
    }
  }
@media only screen and (min-width: 501px) {
  #splash {
    background-image: url("fullsize-img.jpg");
  }
}

如果您想从代码中执行此操作，可以使用调整大小事件处理程序。

window.addEventListener('resize', () =? {
  if(window.innerWidth < 501) {
    document.querySelector('#spash').style.backgroundImage = 'url("phone-img.jpg")';
  } else {
    document.querySelector('#spash').style.backgroundImage = 'url("fullsize-img.jpg")';
  }
});

【讨论】：

【解决方案2】：

我们可以使用window.resize方法

function getWindowSize() {
    var inner_width = window.innerWidth;
}

window.onresize = getWindowSize;

if(inner_width >= 501){
   document.getElementById('spash').style.backgroundImage: url("fullsize-img.jpg");

}

【讨论】：

【解决方案3】：

如果你说你想用 CSS 媒体查询改变图像的窗口大小，那么你写的代码是正确的，但不是设置最小宽度，把它改为最大-宽度，所以如果窗口宽度小于“501px”，则在媒体查询中将此图像设置为背景图像 URL“phone-img.jpg”，如果窗口宽度大于“501px”，则设置此在媒体查询之外作为背景图像 URL “fullsize-img.jpg”。这是您的代码示例。

#splash {
  background-image: url("fullsize-img.jpg");
}
@media only screen and (max-width: 501px) {
  #splash {
    background-image: url("phone-img.jpg");
  }
}

但重要的一点是，您需要为使用背景图片的标签指定高度和宽度，并且背景图片 URL 不适用于 span 标签，建议使用 div 标签

<div id="splash" style="height:500px; width: 500px"></div>

【讨论】：