1

Tengo el siguiente codigo en mi archivo javascript:

if (screen.width < 801) {
  document.getElementById("nav-links").className += "overlay-menu";
} else {
  document.getElementById("nav-links").className += "";
}

Esto hace que al principio si que aplique o no la clase al CSS según el tamaño, pero si redimensionas la pagina luego, no se aplica el cambio de estilo CSS. Como puedo hacer para que se aplique al redimensionar?

1
  • ¿Qué quieres decir con diatónicamente?
    – user7176
    Commented el 4 may. 2018 a las 6:37

4 respuestas 4

3

La solución mas sencilla seria usar @media en css para que de esta forma no necesites si quiera usar javaScript.

Un ejemplo podría ser el siguiente:

@media (min-width: 801px) {
  .overlay-menu {
       //Estilos del overlay menu
  }
}

En el div de html añadirias la clase y esta solo se ejecuta a partir de los 801px

<div id="nav-links" class="overlay-menu"><!-- Contenido --></div>
2
  • Genial! He conseguido que me funcione correctamente! Muchas gracias por la ayuda! Commented el 4 may. 2018 a las 20:52
  • @ErikPastorRios si funciona y la respuesta es correcta¿Podrías aceptarla como valida dándole click al "check"? Commented el 7 may. 2018 a las 6:06
2

El objeto window tiene el evento onresize, puedes usarlo para que cada vez que se cambie el width del navegador se vuelva a preguntar si quieres que tu estilo CSS se aplique o no.

Podrías implementarlo así:

object.onresize = function(){
    if (screen.width < 801) {
       document.getElementById("nav-links").className += "overlay-menu";
    } else {
       document.getElementById("nav-links").className += "";
}
};
1
  • Gracias a todos por la ayuda! He conseguido solucionarlo por medio de media queries y gracias a las herramientas de desarrollo de Chrome he podido comprobar los estilos que me fallaban al principio! Muchas gracias por la ayuda y los consejos! Commented el 4 may. 2018 a las 20:54
0

La primera vez que cambia si funciona bien y cuando redimensionas no se aplica porque la condición solo se aplica una vez a menos de que pongas un listener que cuando cambia el tamaño de la pantalla haga X cosa o mejor aún, ese tipo de cosas las haces con CSS y no necesitas de ningun listerner o algo por el estilo, se hace con media querys

1
0

Los compañeros ya han aclarado que es mejor que lo hagas con css, de todas formas es posible que tengas que hacerlo por JS si lo que buscas es afectar a otras clases ( tipo .overlay-menu .main{} ) En ese caso, si lo haces por JS, esta linea es inutil y no está haciendo nada:

 document.getElementById("nav-links").className += "";

Si lo que quieres es quitarle la clase deberias hacer:

if (screen.width < 801) {
document.getElementById("nav-links").className += "overlay-menu";
} else {
document.getElementById("nav-links").classList.remove("overlay-menu");
}

Por otro lado, no estas comprobando si #nav-links ya tiene la clase puesta, por lo que si lo haces con .onresize como propone el compañero te va a empezar a añadir la misma clase una y otra vez. Si no lleva mas clases que esa, quitale el "+"

1
  • Gracias a todos por la ayuda! He conseguido solucionarlo por medio de media queries y gracias a las herramientas de desarrollo de Chrome he podido comprobar los estilos que me fallaban al principio! Muchas gracias por la ayuda y los consejos! Commented el 4 may. 2018 a las 20:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.