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

Question

[Евгений Журов]

Добрый день. В результате различных действий (клики, ховеры и пр.) множеству элементов динамически присвоены те или иные стили. При ресайзе окна необходимо абсолютно все их сбросить. Есть ли какая-то универсальная функция в jquery, которая позволяет это сделать? Чтобы не нужно было для каждого элемента прописывать конструкции типа:

$(".header__contacts, .subhead").css({"top": "", "margin-top": ""});

А прописать что-то универсальное для всех, вроде такого:
$("body").find('*').css("все свойства", "");

Answer 1

[Андрей R]

Можно попробовать что-то вроде, только это затронет и те стили, которые прописаны в атрибуте style
$('#someDiv').attr('style','');

Comments

[Евгений Журов]

Почему-то пропали ответы, написанные до этого. Такой вариант предлагали, да я и сам про него знаю, но в том-то и дело, что там есть инлайновые стили, прописанные напрямую, и их нельзя удалять(

[Андрей R]

Евгений Журов: жаль, что так, я просто увидел, что нет ответов... тогда, как вариант можно сохранять те стили, которые вы меняете в data-* атрибуте, потом циклом пройтись по ним, и выключить их...

например...

когда добавляем:
$('#someDiv').css('margin', 10 + 'px');
$('#someDiv').data('style', $('#someDiv').data('style')+ ' margin' );

выключаем:

$('#someDiv').data('style').split(' ').forEach(function(style){
$('#someDiv').css(style, '');
});

[Евгений Журов]

Андрей R: А вот это интересная мысль! Большое спасибо, попробую!

Answer 2

[Дмитрий Pacification]

$("[style]"); чем не вариант?

Comments

[Евгений Журов]

Как именно это работает? Просто впервые вижу такую конструкцию) Просто удаляет инлайновые стили? Тогда не вариант, т.к. не все инлайновые стили можно удалять, а только динамически созданные.

[Дмитрий Pacification]

Это типичный селектор по атрибуту . Работает точь в точь, как и в css. Вы можете указать конкретные значения которые хотите удалить. Но я бы сделал по другому. Всю верстку перенес бы в css, а динамические данные оставил инлайново, чтобы можно было перезатирать в данном случае.

Хотя мне понравился еще один вариант, просто добавлять классы is-open, is-active, is-какое-то-там-состояние, которые меняют визуальное оформление элементов в зависимости от их состояния. И делать им toggle.

И кстати селектор по атрибуту и такие штуки типа &(':hover') работают в jq медленнее. Лучшие использовать поиск по классу или querySelector в чистом js