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 of the media query automatically. Is it somehow possible to alter the contents of the .css-file with javascript like I can change the DOM?
Adding a HTML <style>-element to the DOM using javascript is not my desired solution, because I want to keep all css in the .css-file
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;
}
}
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 */;
You can write by using $(window).width()
value=959;
if($(window).width() < value)
{
$(".classname").css("color","white");
}
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() {}
});
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:
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;
}
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.
