Всем привет. Вопрос по динамическому применению стилей к элементам.
Смоделируем такую ситуацию: некому модулю на языке JavaScript требуется на некоторое время применить ряд стилей к элементу в DOM, а затем отменить действие этих стилей, как будто бы модуль и не касался никогда этого элемента.
Всё просто, если значения CSS-свойств известны «at design time» (т.е. статичны): в таблице стилей создается CSS-класс с перечнем нужных CSS-свойств со статичными значениями, и модуль решает задачу добавлением/удалением имени класса в атрибуте className.
.MyModuleStyle {
width:150px;
}
elem.classList.add("MyModuleStyle");
// ...
elem.classList.remove("MyModuleStyle");
А что если желаемые значения CSS-свойств становятся известны только во время выполнения? С одной стороны, можно было бы перед применением стиля запомнить прежнее значение свойства, а потом восстановить его.
var desiredWidth = 150, // условно. В действительности значение становится известно in runtime
oldWidth = window.getComputedStyle(elem, null).width;
elem.style.width = desiredWidth + "px";
// ...
elem.style.width = oldWidth;
Это решение, казалось бы, работает, но оно совершенно неприемлемо для модуля, т.к. возможные последующие попытки пользователя динамически поменять ширину элемента путем назначения какого-нибудь своего CSS-класса при этом будут обречены на провал (стили класса не перекроют инлайновые, которые мы добавили в последней строке примера). Сделать elem.removeAttribute("style") — для модуля тоже не вариант, естественно.
Мне видится только один возможный вариант решения: манипуляции с таблицами стилей напрямую через JavaScript. Из скрипта создаем (CSSStyleSheet.insertRule) CSS-правило для класса, заполняем значения свойств динамически вычисленными значениями и далее оперируем атрибутом className. Но выглядит это решение, на мой взгляд, как «костыль».
Может, кто-нибудь встречался с подобными проблемами? Как выходили из положения?