2

¿Como cambiar la clase de un DIV según el ancho del navegador?

Estoy intentando captar el ancho del navegador y con el alert compruebo que esta parte si funciona, pero no los remove y add no se ejecutan, no se porqué.

window.onload = function() {

   if(window.innerWidth<1000){
     var element1 = document.getElementById("mapa");
     element1.classList.remove("col-md-6");
     element1.classList.add("tab-pane");
     element1.classList.add("fade");
     element1.classList.add("show");
     element1.classList.add("active");

     var element2 = document.getElementById("cuidadores");
     element2.classList.remove("col-md-6");
     element2.classList.add("tab-pane");
     element2.classList.add("fade");   
   }   
   alert(window.innerWidth); 
};
1

2 respuestas 2

2

Puedes hacerlo con jquery, utilizando el método .resize()resize y con $(window).width(); obtienes el ancho de la pantalla.

$(window).resize(function(){

  if($(window).width() < 1000){
    console.log($(window).width());
   
    
  }else{
  
    console.log($(window).width());
   
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Sólo se muestra cómo obtener el tamaño de la pantalla con jquery (cuando el usuario no necesita incluír una librería completa sólo para obtener el tamaño de su pantalla) y no se muestra cómo cambiar la clase dependiendo de estos tamaños. el 5 ago. 2019 a las 22:27
1

Puedes utilizar la regla de css @media para ello sin necesidad de cambiar de clase, la misma clase se puede adaptar dependiendo del tamaño aquí dos ejemplos:

Puedes tener dos hojas de estilos con las mismas clases y que se aplique una u otra dependiendo el tamaño de la pantalla


<link rel="stylesheet" media="(max-width: 399px)" href="estilos_de_movil.css" />
<link rel="stylesheet" media="(min-width: 400px)" href="estilos_de_tablet.css" />
<link rel="stylesheet" media="(min-width: 1000px)" href="estilos_de_computadora.css" />

La otra forma de hacerlo es en la misma hoja de estilos definir las diferencias de las clases dependiendo de los tamaños



<style>

.clase {
    background:white;
}

@media (max-width: 600px) {
    .clase {
        background:red;
    }

}
</style>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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