@oyeooo

Как автоматические создать классы и добавить стили из style="*"?

Программа возвращает html в котором стили заданы в атрибуте style.
Какие есть варианты, для того чтобы стили сгруппировать в классы и присвоить их элементу?
Спасибо!
Т.е. из:
<div style="font-size: 1em; color: #fff">..</div>
<div style="font-size: 1em; color: #fff">..</div>
<div style="font-size: 1em; color: #ff0">..</div>

получить
<style>
.a { font-size: 1em; color: #fff }
.b { font-size: 1em }
.d { color: #ff0 }
</style>
<div class="a">..</div>
<div class="a">..</div>
<div class="b d">..</div>
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор
Конкретно как у тебя - вряд ли кто-то ответит. Потому, что это достаточно сложная задача.
Например: определить, что стили в третьем диве - это сумма двух первых.

Всё, что я могу предложить - для каждого элемента сделать уникальный класс, можно как-то проверять, что стили у элементов совпадают, например по хешу, но это сработает только в том случае, если порядок свойств у стиля идентичен.

let css = '';
let counter = 0;

[...document.querySelectorAll('*')]
  .forEach(e => {
    if (e.getAttribute('style')) {
      css += `.${counter} { ${e.getAttribute('style')} }`;
      e.classList.add(counter);
      counter += 1;
      e.removeAttribute('style');
    }
  });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы