javascript - 有没有办法修改在使用媒体功能和 javascript 的媒体查询下创建的样式？

Question

我有两个具有纵向和横向功能的 CSS 媒体查询。我想使用 javascript 修改这些样式，这样我就可以根据传递给页面的变量动态更改其中的样式。我知道我可以使用 document.styleSheets[x].rules[x] 来修改 css，但我不确定如何只修改特定媒体查询下的样式。

这是我当前的代码:

@media screen and (orientation:portrait) {
    #Header {
        background-color: #000;
        height: 60px;
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 100;
    }

    #Main .row ul li {
        width: 110px;
        height: 145px;
        padding: 2px;
        margin: 2px 4px 2px 0px;
        vertical-align: middle;
        text-align: center; 
        background-color: #FFF;
        position: relative;
        display:table-cell;
        float:left;
    }

    #Main .row ul li img {
        border: 0;
        width: 86px;
        height: 86px;
        padding: 12;
    }

}

@media screen and (orientation:landscape) {
    #Header {
        background-color: #000;
        height: 45px;
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 100;
    }

    #Main .row ul li {
        width: 115px;
        height: 110px;
        padding: 2px;
        margin: 2px 4px 2px 0px;
        vertical-align: middle;
        text-align: center;
        background-color: #FFF;
        position: relative;
        display:table-cell;
        float:left;
    }

    #Main .row ul li img {
        border: 0;
        width: 66px;
        height: 66px;
        padding: 8px;
    }
}

我需要分别更改两个方向之间的样式。

此页面让我了解了如何指定媒体查询，但没有说明如何在这些媒体查询中指定媒体功能。 http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets

Answer 1

我没有找到我的问题的确切答案，但找到了三种不同的方式(我认为)以更灵活的方式实现最终目标。

首先:完全摆脱 css 媒体功能和媒体查询。而是使用 javascript 来检测设备方向。然后在使用 document.styleSheets[0].cssRules[0]; 方向改变时直接改变 css；每次都更改每种样式。

http://davidwalsh.name/orientation-change http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

第二个:是第一个的变体。我可以创建两个不同的样式表。一种用于人像，一种用于风景。然后使用 Javascript 方向检测方法，我可以根据需要在样式表之间切换。

http://davidwalsh.name/orientation-change https://www.inetsolution.com/turnleft/post/CSS-Style-Switcher-A-quick-and-dirty-how-to.aspx

第三:在我的情况下，我只需要动态创建一次媒体查询。所以第三种选择是首先使用 javascript 创建媒体查询。

http://davidwalsh.name/add-rules-stylesheets