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

标签 javascript css html media-queries

我有两个具有纵向和横向功能的 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

最佳答案

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

首先: 完全摆脱 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

关于javascript - 有没有办法修改在使用媒体功能和 javascript 的媒体查询下创建的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29149341/

相关文章:

javascript - vue 的 .each() 方式

javascript:检查用户代理是否在桌面设备上

html - 不显示空表格单元格

css - 通过变换和过渡连续旋转

javascript - 减少 HTML5/Javascript 应用程序中的抖动

javascript - 读取 AS3 中的浏览器 URL?

javascript - 在 jQuery 中动态隐藏选项卡中的元素

javascript - 将颜色从 spectrum 设置为另一个 div

html - CSS 中是否有不相邻的选择器?

javascript - 基于 div ID 的 HTML 表格颜色