1

Luego de buscar por horas algo que lograra agregar la clase btn-sm a mis botones si se accedia desde un celular, encontré este código Jquery que me funcionó:

$(document).ready(function(){
 
    if(window.innerWidth < 768){
        $('.btn').addClass('btn-sm');
    }
 
});

Francamente evito usar Jquery y siento que al usar dicho código mi sitio tarda un poco más en cargar. Traté de convertirlo a Javascript puro con mis pocos conocimientos y con esta guía:

function ready (fn) {
  if(window.innerWidth < 768){
    document.querySelector('.btn').classList.add('btn-sm');
    }
}

Pero no funciona, no se agrega la clase btn-sm a los botones. ¿Qué está mal?

1 respuesta 1

1

El método querySelector devuevel solo el primer elemento encontrado.

Necesitas utilizar querySelectorAll para obtener todos.

Ejemplo:

function ready() {
  if (window.innerWidth < 1024) {
    document.querySelectorAll('.btn').forEach(e => e.classList.add('btn-sm'));
  } else {
    document.querySelectorAll('.btn').forEach(e => e.classList.remove('btn-sm'));
  }
}
window.addEventListener('resize', ready);
ready();
.btn {
  background-color: blue;
}

.btn.btn-sm {
  background-color: red;
}
<button class="btn">Btn 1</button>
<button class="btn">Btn 2</button>
<button class="btn">Btn 3</button>

3
  • Entiendo, ya lo probé pero de igual forma no funciona:( no se aplica la clase, estoy usando bootstrap 5 el 6 abr. 2022 a las 11:26
  • @NotoriusSha, acabo de agregar un ejemplo funcional, espero que te sirva.
    – Marcos
    el 6 abr. 2022 a las 11:30
  • muchas graciaaaas! Funciona perfecto. el 6 abr. 2022 a las 11:44

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.