Quiero establecer una clase para un elemento durante el cambio de ancho, dependiendo de si el ancho del navegador se amplía o se reduce. Si se estrecha, el elemento recibe la primera clase; si se ensancha, el segundo.
<--- clase=“estrecho” | ---> clase=“ampliar”
Si se puede hacer, mi primera opción es CSS, si no, JavaScript (o una combinación de los dos). No tengo idea de cómo abordar el problema, solo sé que las consultas de medios CSS no me dan lo que quiero.
Puede utilizar @media. Compruebe el tamaño de la pantalla, establezca 2 reglas de @media. En cada regla, puede cambiar las propiedades CSS de la misma clase.
Puede usar el método matchMedia de JavaScript de la siguiente manera:
function changeClass(x) { if (x.matches) { // If media query matches document.getElementById("myDiv").classList.add("narrow"); document.getElementById("myDiv").classList.remove("widen"); } else { document.getElementById("myDiv").classList.remove("narrow"); document.getElementById("myDiv").classList.add("widen"); } } var x = window.matchMedia("(max-width: 900px) and (min-width: 400px)") changeClass(x) // Call listener function at run time x.addEventListener("change", () => { changeClass(x); }); .narrow { color: red; } .widen { color: rgb(45, 230, 45); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="myDiv"> this is the div </div> <script src="myCode.js"></script> </body> </html>Si el ancho del navegador es mayor a 700px , cambia la clase a .widen y si es menor a 700px , cambia la clase a .narrow .