如何根据屏幕宽度添加/删除或切换类？

Question

Forgive me if this has been answered as I am struggling to find a similar scenario (which I find bazaar as I am sure this is a common script to run).

Basically, I would like to toggle or even add and remove a class based on the screen width. Below is my attempt at a script, where the eventlistener is working based on the colsole.log but I can't get the function to toggle the classes.

Basically, I would like to:

• turn class.mobile on and.desktop off for all elements that have the class.responsive, when the view width is less than 700px

• And then turn class.desktop on and.mobile off for all elements that have the class.responsive, when the view width is greater than 701px.

My attempt:

  window.addEventListener("resize", function() {
  var w = window.innerWidth;
  var responsiveDiv = document.querySelectorAll('.responsive')[0];
  //for (var i = 0; i < responsiveDiv.resize; i++) 
  {

//responsiveDiv[i].addEventListener('resize', function() {

      if (w < 700) {
        //responsiveDiv.classList.remove('desktop');
        responsiveDiv.classList.remove=("desktop");
        responsiveDiv.classList.add("mobile");
        console.log("desktop Remove");
      } else {
       responsiveDiv.classList.add("mobile");
        console.log("mobile removed");
      } }
    });

(The parts that are commented out, are parts that I think need to go the script but they end up breaking the console log, probably because the syntax is wrong. )

Also if what I am trying to achieve is not the industry standard way of doing it, I am more than happy to be advised alternative ways to achieve the same thing.

Answer 1

I have used the forEach method instead of a loop you can interchange that.

There were few mistakes in your code that are as follows:

• Mistakenly you have added = operator for a method.
• In the else statement you are not removing the class mobile instead you are adding that again.

Check below I have corrected the code Hope this solved your problem.

 window.addEventListener("resize", function() { var w = window.innerWidth; console.log(w) var responsiveDiv = document.querySelectorAll('.responsive'); responsiveDiv.forEach((element) => { console.log(element) if(w < 700) { element.classList.remove("desktop"); element.classList.add("mobile"); console.log("desktop Remove"); } else { element.classList.remove("mobile"); element.classList.add("desktop"); console.log("mobile removed"); } }) });

 .responsive{min-width: 100vw; min-height: 100vh;}

 <div class='responsive'>1</div> <div class='responsive'>2</div> <div class='responsive'>3</div>