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 - 动画序列失控

伪元素后的 CSS(过渡)- 如何过渡悬停时显示的内容

html - 什么 CSS 属性/HTML 元素提供了这种垂直线效果?

javascript - Javascript 函数参数值错误

javascript - Regex Javascript - 无效的正则表达式 : Nothing to repeat for number input

javascript - AngularJS - 未选中单选按钮

javascript - 启用带有情感的全局主题?

jquery - 如何循环div的背景图?

javascript - 编写 AJAX 来接收 JSON 文件?

html - Bootstrap 列元素调整大小碰撞到新行