Can I Change The Media Query Using Javascript / Jquery?

I have a style.css with a media query. In my javascript-file, I have a value for the desired mobile-width stored in a variable. By changing the variable, I want to change the value

Solution 1:

The best option would be to have two sets of media queries which are only applied based on a parent class being present.

@media (max-width: 600px) {

  .w600.myDiv{
    color:red;
  }

}

@media (max-width: 400px) {

  .w400.myDiv{
    color:red;
  }

}

You could then add/remove w600 or w400 to the body class to allow the required media query to work.

Using jQuery this could be done like:

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

---

I appreciate you may have more than just one style and would therefore like to reduce code duplication.

In which case you could use a CSS transpiler such as Less with mixins:

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

@media (max-width: 600px) {

  .w600 {
    @mediaqueryruleset();
  }

}

@media (max-width: 400px) {

  .w400 {
    @mediaqueryruleset();
  }

}

Which would output:

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

Solution 2:

You can set the rule directly using .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

Solution 3:

You can write by using $(window).width()

value=959;

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

Solution 4:

You can use Enquire.js jQuery plugin.

It is a JavaScript library for dealing with media queries in JavaScript.

This is quick start code sample:

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() {}

});

Solution 5:

Yes. Maybe. Inspired by @guest271314 answer. This seems to allow the changing of the media query conditions via JavaScript.

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

Of course, check if the rule has media query applied:

varcurrentQuery= {index:0,rule:null,mediaText:null};
varinclusionQuery="(min-width: 0px)";
varexclusionQuery="(min-width: 99999px)";
varnumberOfMediaQueries=0;

function hideAllMediaQueries() {
    varrules= document.styleSheets[0].cssRules;
    varfirstQueryIndex=0; // show this queryvarqueryIndex=0;
    varnumberOfRules= rules!=null ? rules.length : 0;

    // loop through rules and hide media queries except selectedfor (var i=0;i<numberOfRules;i++) {
        varrule= 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;
}

Note: The example above only applies to existing media queries in your CSS. It does not add or remove queries. It checks if media query exists by checking that the rule.media property is not null.