Question

我有一个带有媒体查询的style.css。在我的javascript文件中，我有一个存储在变量中的所需移动宽度的值。

通过更改变量，我想自动更改媒体查询的值。是否有可能用javascript更改.css文件的内容，就像我可以更改DOM一样？使用javascript向DOM添加HTML <style> - 元素不是我想要的解决方案，因为我想将所有css保存在.css文件中

Answer 1

最好的选择是拥有两组媒体查询，这些查询仅基于存在的父类应用。

@media (max-width: 600px) {

  .w600 .myDiv{
    color:red;
  }

}

@media (max-width: 400px) {

  .w400 .myDiv{
    color:red;
  }

}

然后，您可以向w600类添加/删除w400或body，以允许所需的媒体查询生效。

使用jQuery可以这样做：

$("body").addClass("w600")
         .removeClass("w400");

我感谢您可能不仅仅有一种风格，因此希望减少代码重复。

在这种情况下，你可以使用CSS转换器，例如Less和mixins：

@mediaqueryruleset:{
  .myDiv{
    color:red;
  }
  .myOtherDiv{
    color:blue;
  }
}

@media (max-width: 600px) {

  .w600 {
    @mediaqueryruleset();
  }

}

@media (max-width: 400px) {

  .w400 {
    @mediaqueryruleset();
  }

}

哪个会输出：

@media (max-width: 600px) {
  .w600 .myDiv {
    color: red;
  }
  .w600 .myOtherDiv {
    color: blue;
  }
}
@media (max-width: 400px) {
  .w400 .myDiv {
    color: red;
  }
  .w400 .myOtherDiv {
    color: blue;
  }
}

Answer 2

您可以使用.media.mediaText

的document.styleSheets[0].cssRules直接设置规则

document.styleSheets[0].cssRules[0].media.mediaText = /* new media rule here */;

plnkr http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview

Answer 3

您可以使用$(window).width()

撰写

value=959;

if($(window).width() < value)
{
    $(".classname").css("color","white");
}

Answer 4

您可以使用Enquire.js jQuery插件。

它是一个JavaScript库，用于处理JavaScript中的媒体查询。

这是快速入门代码示例：

enquire.register("screen and (max-width:45em)", {

    // OPTIONAL
    // If supplied, triggered when a media query matches.
    match : function() {},      

    // OPTIONAL
    // If supplied, triggered when the media query transitions 
    // *from a matched state to an unmatched state*.
    unmatch : function() {},    

    // OPTIONAL
    // If supplied, triggered once, when the handler is registered.
    setup : function() {},    

    // OPTIONAL, defaults to false
    // If set to true, defers execution of the setup function 
    // until the first time the media query is matched
    deferSetup : true,

    // OPTIONAL
    // If supplied, triggered when handler is unregistered. 
    // Place cleanup code here
    destroy : function() {}

});

Answer 5

好的，我想我有一个适合我的解决方案。我将媒体查询外包到另一个style.css（例如style-mobile.css）。仅当窗口宽度是变量值时才加载此文件。

此解决方案适合我，但其他人可能无法在此处找到该问题的答案。我是否应该将此答案标记为解决方案？

Answer 6

您还必须知道某些方法可能无法在Safari中正常运行。无法记住问题，以便您可以在需要时找到更多信息。

Answer 7

是的。也许。受到@ guest271314 answer的启发。这似乎允许通过JavaScript更改媒体查询条件。

document.styleSheets[0].cssRules[0].conditionText = "(min-width: 0px)";

当然，请检查规则是否应用了媒体查询：

var currentQuery = {index:0,rule:null,mediaText:null};
var inclusionQuery = "(min-width: 0px)";
var exclusionQuery = "(min-width: 99999px)";
var numberOfMediaQueries = 0;

function hideAllMediaQueries() {
    var rules = document.styleSheets[0].cssRules;
    var firstQueryIndex = 0; // show this query
    var queryIndex = 0;
    var numberOfRules = rules!=null ? rules.length : 0;

    // loop through rules and hide media queries except selected
    for (var i=0;i<numberOfRules;i++) {
        var rule = rules[i];

        if (rule.media!=null) {

            if (queryIndex==firstQueryIndex) {
                currentQuery.mediaText = rule.conditionText;
                currentQuery.index = firstQueryIndex;
                currentQuery.rule = rule;
                rule.conditionText = inclusionQuery;
            }
            else {
                rule.conditionText = exclusionQuery;
            }

            queryIndex++;
        }
    }

    numberOfMediaQueries = queryIndex;
}

注意：上面的示例仅适用于CSS中的现有媒体查询。它不会添加或删除查询。它通过检查rule.media属性是否不为空来检查是否存在媒体查询。

我可以使用javascript / jQuery更改媒体查询吗？

7 个答案: