我有一个带有媒体查询的style.css文件。 在我的javascript文件中,我将所需移动宽度的值存储在变量中。
通过更改变量,我想自动更改媒体查询的值。是否可以像更改DOM一样使用Javascript更改.css文件的内容?
使用Javascript向DOM添加HTML <style>
元素不是我想要的解决方案,因为我想将所有css保留在.css文件中。
我有一个带有媒体查询的style.css文件。 在我的javascript文件中,我将所需移动宽度的值存储在变量中。
通过更改变量,我想自动更改媒体查询的值。是否可以像更改DOM一样使用Javascript更改.css文件的内容?
使用Javascript向DOM添加HTML <style>
元素不是我想要的解决方案,因为我想将所有css保留在.css文件中。
@media (max-width: 600px) {
.w600 .myDiv{
color:red;
}
}
@media (max-width: 400px) {
.w400 .myDiv{
color:red;
}
}
w600
或 w400
添加/删除到 body
类中来允许所需的媒体查询起作用。$("body").addClass("w600")
.removeClass("w400");
我很理解你可能有不止一种风格,因此想要减少代码重复。
在这种情况下,你可以使用CSS转译器,比如Less与mixin:
@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;
}
}
document.styleSheet
.cssRules
的.media.mediaText
来动态更改媒体查询变量。http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview - guest271314document.styleSheets [0] .cssRules的
.media.mediaText
来设置规则。document.styleSheets[0].cssRules[0].media.mediaText = /* new media rule here */;
该文本中包含一个链接,指向名为"plnkr"的网站,并提供了一个代码示例。Error: Permission denied to access property "mediaText"
,但我可以设置 conditionText
。document.styleSheets[0].cssRules[0].conditionText = "(min-width: 0px)";
- 1.21 gigawatts$(window).width()
来编写。value=959;
if($(window).width() < value)
{
$(".classname").css("color","white");
}
你可以使用Enquire.jsjQuery插件。
这是一个用于处理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() {}
});
是的,可能吧。受到 @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;
}
rule.media
属性是否为 null 来检查媒体查询是否存在。
document.styleSheets [0] .cssRules
的.media.mediaText
属性是可能的。http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview - guest271314