Как удалить класс при обновлении страницы?

Question

[megamutex]

Добрый день. Есть функция, которая следить за шириной экрана браузера и если достигается определенное значение, то выполняется удаление или добавление класса определенным блокам. Например:

checkSize ();
$(window).resize(checkSize);
function checkSize(){
if ($(window).width() < 671){
        $(".slick-slide").removeClass("slick-centered");
    }
   }

Проблема в том, что если ширина меньше 671px и при этом обновляем страницу, то удаление класса не происходит.
Как решить проблему?
Нарыл такое решение

document.getElementById('sl').classList.remove('slick-centered');

Такой вариант срабатывает, но нужно каждому блоку прописывать айдишник, что не вариант.

Answer 1

[ThunderCat]

window.onload = function() {
checkSize();
}

Comments

[megamutex]

Спасибо!

[Dark Hole]

megamutex: а почему вы мой ответ правильным не ответили? я проверил - работает!

[megamutex]

Dark Hole: Это решение был проще для меня и это первое, что я попробовал

Answer 2

[Dark Hole]

Поучите нативный JS! А решений ваших проблем несколько

var el = document.getElementsByClassName('slick-slide');
for( var counter = 0; counter < el.length; counter++){
el[counter].classList.remove('slick-centered');
};

Это удалит класс от всех элементов

Answer 3

[Пётр Попов]

Может синтаксическая ошибка: вместо checkSize (); попробуйте checkSize(); (слитно) написать.

Comments

[megamutex]

Не думаю, что в этом дело. Если написать
if ($(window).width() < 671){
alert("asd");
$(".slick-slide").removeClass("slick-centered");
}
то сообщение выведет при обновлении, но removeClass не сработает

Answer 4

[Alex]

Тут все без JS можно сделать. На "@media" посмотрите
@media screen and (max-width: 671px) {...}