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

【问题标题】：Is there a way to modify the styles created under a Media query that is using media features with javascript?有没有办法修改在使用 javascript 的媒体功能的媒体查询下创建的样式？
【发布时间】：2015-03-21 01:21:54
【问题描述】：

我有两个 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

【问题讨论】：

标签： javascript css html media-queries

【解决方案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

【讨论】：