Замените класс CSS в элементе HTML его свойствами CSS в JavaScript

Question

Я пытаюсь получить исходный код страницы HTML, используя JavaScript (вроде скриншота). А для укладки я использую внешний CSS. Однако, когда я получу исходный код HTML, стилизация не будет применена, потому что я не смогу получить свойства CSS для элементов.

Итак, мне интересно, может заменить имя класса CSS фактическими CSS свойствами, определенными в этом классе. например,

для элемента HTML,

<div class="exampleClass"><div>

И CSS,

.exampleClass {
    background-color:#FFFFFF;
}

Тогда извлеченный исходный код с использованием Javascript будет

<div style="background-color:#FFFFFF;"><div>

Как я могу сделать это в JavaScript? Спасибо

Answer 1

function getCSSPropertiesBySelector(selector) {
    return [...document.styleSheets].map(stylesheet => {
        var g = [...stylesheet.cssRules].find(rule => rule.selectorText === selector);
        if (g) {
            return g.style.cssText;
        }
    }).find(r => r);
}

В основном основано на { ссылка }

getCSSPropertiesBySelector('.logo')
//"display: block; grid-area: I / I / I / I; width: 200px; height: 44px; margin-right: 24px;"

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

Answer 2

Вы можете присвоить нужный класс тегу HTML в javascript. Например:

const div = document.createElement('div');
div.className = 'exampleClass';
document.body.appendChild(div);

Или

div.classList.add('exampleClass');