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

Question

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

通过更改变量,我想自动更改媒体查询的值.是否有可能用javascript更改.css文件的内容,就像我可以更改DOM一样？<style>使用javascript向DOM 添加HTML 元素不是我想要的解决方案,因为我想将所有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您可以直接使用of设置规则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");
}