1

Estou tentando remover uma classe CSS pelo JavaScript quando a tela diminui

Só que o evento que estou usando é o scroll, que é pra rolagem de mouse. Aí toda vez q a tela diminui preciso rolar o mouse para a função funcionar.

Alguém sabe um evento próprio para resolução no JavaScript?

jQuery(function () {
                
    jQuery(window).scroll(function () {
    
      if (jQuery(this).width() < 1200) {        
         $("#divtexto").removeClass("col-6");      
         $("#textMaratona").removeClass("col-6");       
      }else{       
         $("#divtexto").addClass("col-6");     
         $("#textMaratona").addClass("col-6");   
     } 
        
   });
       
  });

2 Respostas 2

2

Você deve utilizar o evento resize para isso. Veja a documentação do handler jQuery.

Assim:

$(function() {
  $(window).resize(function() {
    if ($(this).width() < 1200) {
      $('#example').removeClass('custom');
    } else {
      $('#example').addClass('custom');
    }
  });
});
#example.custom {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="example">Olá, mundo!</div>

1
  • vlw msm kara.. deu certo aqui kkkk muit obg...
    – Davi Alves
    Commented 29/03/2020 às 23:08
1

Poderia usar os dois eventos ao mesmo tempo usando o método .on():

$(window).on("scroll resize", function () {

Basta colocar os eventos separados por um espaço, como mostrado acima.

Mas não faz muito sentido usar o evento scroll, já que ele não tem nada a ver com a largura da janela. Use apenas o evento resize:

$(window).on("resize", function () {

E você pode ainda simplificar o código usando um ternário, se for só pra fazer isso, adicionando/removendo a classe dos dois elementos ao mesmo tempo:

$(function () {
   $(window).on("resize", function () {
      $("#divtexto, #textMaratona")
      [(jQuery(this).width() < 1200 ? "remove" : "add") + "Class"]
      ("col-6");      
   });
});

Pra quê usar JQuery se você pode usar o alias $? Economiza uns bytes de código.

2
  • testei dessa forma tambem.. e deu certo.. vlw kara..
    – Davi Alves
    Commented 29/03/2020 às 23:08
  • Marque uma das respostas com ✔.
    – Sam
    Commented 1/04/2020 às 0:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .