This little function gives me a headache.
document.write in combination with media queries just won't work responsive.
I'm trying to change the css stylesheet with document.write as soon as the max-width changes.
It works, but not responsive - I have to reload the page.
It works perfectly fine with document.body.style.backgroundColor as example - but not with document.write.
Does anyone know why, or is there a better way?
let Swidth = window.matchMedia("(max-width: 700px)")
function reSize(Swidth) {
if (Swidth.matches) {
/* document.body.style.backgroundColor = "yellow"; // This works */
document.write('<link href="./src/css/variant1.css" type="text/css" rel="stylesheet">');
} else {
/* document.body.style.backgroundColor = "blue"; // This works */
document.write('<link href="./src/css/variant2.css" type="text/css" rel="stylesheet">')
}
}
reSize(Swidth);
Swidth.addEventListener("change", reSize);
You can use the media attribute of the <link> element.
<link href="./src/css/variant1.css" type="text/css"
rel="stylesheet" media="screen and (max-width: 700px)">
<link href="./src/css/variant2.css" type="text/css"
rel="stylesheet" media="not screen and (max-width: 700px)">
This solution works for me.
function addStylesheet(theHref) {
if (document.createStyleSheet) {
document.createStyleSheet(theHref);
} else {
var newSheet = document.createElement('link');
newSheet.setAttribute('rel', 'stylesheet');
newSheet.setAttribute('type', 'text/css');
newSheet.setAttribute('href', theHref);
document.getElementsByTagName('head')[0].appendChild(newSheet);
}
}
let Swidth = window.matchMedia("(max-width: 700px)")
function reSize(Swidth) {
if (Swidth.matches) {
document.body.style.backgroundColor = "yellow";
addStylesheet("./src/css/variant1.css")
} else {
document.body.style.backgroundColor = "blue";
addStylesheet("./src/css/variant2.css")
}
}
reSize(Swidth);
Swidth.addEventListener("change", reSize);