使用 JS 编辑 CSS 媒体查询

Posted 2023-03-06

【中文标题】使用 JS 编辑 CSS 媒体查询

【英文标题】：Edit CSS media queries with JS

【发布时间】：2014-12-30 08:54:31

【问题描述】：

我需要通过 JS 设置背景大小。这是我当前的 CSS 代码，可以满足我的需要（根据方向无缝设置大小 %）

background-size: 50%;
@media all and (orientation:landscape) 
    background-size: auto 50%;

我需要更改上述代码中 50% 值的两个实例。现在我有这个

element.css("background-size", foo.toFixed(0) + '%');

这可行，但会丢弃媒体查询。怎么解决？

【问题讨论】：

定义一个类/ID。设置类/id的属性。

使用 jQuery 的 css 函数是不可能做到这一点的，因为它通过设置内联 style 属性来工作。 Media queries don't work with inline styles.

谢谢，这澄清了事情

【参考方案1】：

要添加条件来检查窗口大小是否为横向，您可以使用：

if(window.innerHeight < window.innerWidth)
    element.css("background-size", foo.toFixed(0) + '%');

如果您将它用于移动开发，我会看看 jQuery 移动库。

Source

【参考方案2】：

如果您只是检查方向变化，您可以使用：

window.addEventListener('orientationchange', doSomethingOnOrientationChange)

但如果您真的想检查是否触发了媒体查询，您可以使用Window.matchMedia() 来监听媒体查询事件：

if (matchMedia) 
    var mm = window.matchMedia("(orientation:landscape)");
    mm.addListener(onMatchedMedia);
    onMatchedMedia(mm);

function onMatchedMedia(mm) 
    if(mm.matches)
        el.style.backgroundSize = 'auto ' + foo.toFixed(0) + '%';
     else 
        el.style.backgroundSize = foo.toFixed(0) + '%';
    

这是一个使用 max-width 的演示： http://jsfiddle.net/wxgs9g9s/