Is it possible to change a media query using javascript / jQuery?

Question

I have style.css with a media query. In my javascript file, I have a value for the required width in the mobile memory stored in the variable.

By changing the variable, I want to automatically change the value of the media query. Is it possible to somehow modify the contents of a .css file using javascript, how can I change the DOM? Adding an HTML <style> element to the DOM using javascript is not my desired solution because I want to save all css in a .css file

Answer 1

A better option would be to have two sets of media queries that apply only based on the parent class.

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

Then you can add / remove w600 or w400 to the body class to allow the required media request to work.

Using jQuery, this can be done like this:

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

---

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

In this case, you can 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(); } } 

What will be 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; } } 

Answer 2

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

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

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

Answer 4

You can use the Enquire.js jQuery plugin.

This is a JavaScript library for handling media queries in JavaScript.

This is an example of quick code execution:

 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

Ok, I think I have a solution that suits me. I pass the media request to an additional style.css style (e.g. style-mobile.css). This file is only loaded if the window width is a variable value.

This solution suits me, but others may not find the answer to this problem. Should I mark this answer as a solution anyway?

Answer 6

You should also be aware that some of these approaches may not work correctly in Safari. I can’t recall the problem so that you can find additional information if you need it.