Esta pequeña función me da dolor de cabeza.
document.write en combinación con consultas de medios simplemente no funcionará de manera receptiva.
Estoy tratando de cambiar la hoja de estilo css con document.write tan pronto como cambie max-width .
Funciona, pero no responde: tengo que volver a cargar la página.
Funciona perfectamente bien con document.body.style.backgroundColor como ejemplo, pero no con document.write .
¿Alguien sabe por qué, o hay una mejor manera?
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);Puede utilizar el atributo media del elemento <link> .
<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)">Esta solución funciona para mí.
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);