Good evening to all gentlemen

//js var scrollWidth = document.documentElement.scrollWidth; var realW = scrollWidth;

we have variables about the actual size of the window that the user is watching. Eats, but you can change the size of the screen (do not on the whole screen, but on a part) Suppose there is a width of 1000px and the user is walking around the browser width, it is wider then ..

Is it possible to change the class of the divs in the round-trip style when changing the real width of the browser window?

 //html <div id="a1" class="a1"> <div id="a11" class="a11"> 11 </div> <div id="a12" class="a12"> 12 </div> <div id="a13" class="a13"> 13 <div id="a131" class="a131"> 131 </div> <div id="a132" class="a132"> 132 </div> </div> </div>

For example, if we load the page, we immediately check if realW> 1000 - the style is one, if it is less - the styles are different, but when the window is changed - it is recalculated and changed automatically, i.e. in my case, the replacement of these classes

 если ширина уменьшается стала меньше 1000, меняем классы у id1 -> class="a1s" id11 -> class="a11s" id12 -> class="a12s" id13 -> class="a13s" id131 -> class="a131s" id132 -> class="a132s" если ширина уменьшается стала больше 1000, меняем классы на те, что были изначально id1 -> class="a1" id11 -> class="a11" id12 -> class="a12" id13 -> class="a13" id131 -> class="a131" id132 -> class="a132"

    2 answers 2

    In the case of jQuery, you should look towards event resize ():

     $(window).resize(function () { /* сюда функционал */ });

    which is triggered when the user changes the window size, then:

     var width = $('body').innerWidth()

    will give you the current size, compare it with the criterion that you specified and apply the desired class, first removing those that it already has:

     if (width < 1000) { $('.a1').removeClass('a1').addClass('a1s'); ... // остальные классы }

    Documentation:

    • Ogh .. that’s how the JQ documentation was written! Thank! - sergey

    Option without using jQuery.

     window.onresize = function () { document.getElementById ("id").className = "new_class_name"; };