Как вывести класс со стилями из css?

Question

[Andrej Sharapov]

Нужна помощь в настройке скрипта 2.

Демо: https://jsfiddle.net/6k0L92nu/
где,

1. Есть скрипт, который:
а) добавляет стили div'у в style="", прописанные в data-cls{}
б) выводит эти стили в textarea в другом контейнере:

$('.btn').click(function() {
        $('#bSm').val();
        $('#bSm').css($(this).data('cls'));

        var bsmStyles = $('#bSm').attr('style').replace(/; /g, ';\n');
        var val = $('#form_code').val();

        $('#form_code').val(val.replace(/#bSd \{([\s\S]*?)\}/, `#bSd {\n${bsmStyles}\n}`));
      });

2. Есть похожий скрипт, но он добавляет класс, стили которого прописаны в css:

$(function() {
        var b = $('.btn_cls');
        b.click(function() {
          var cls = $(this).data("cls");
          $('#bSm').toggleClass(cls);
        });
      });

Проблема в том, что добавленный класс не имеет своих свойств, а только добавляет псевдоэлементы :before и :after. Можно ли, по аналогии с первым скриптом, "вытащить" из таблицы стилей значения :before и :after и вставить их в textarea? Например, при добавлении класса utilTwo, в textarea, под #bSd {} должно выводиться так:

#bSd.utilTwo:before {
здесь его стили
}

#bSd.utilTwo:after {
здесь его стили
}

Answer 1

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/Web/API/CSSS...
https://developer.mozilla.org/en-US/docs/Web/API/C...
https://developer.mozilla.org/en-US/docs/Web/API/C...

так же добавлю, что если стиль грузится с другого домена, то для его чтения у тега link должен быть атрибут crossorigin="anonymous", а отдающий сервер должен поддерживать CORS
на каждый элемент style или link создается свой stylesheet, все stylesheets доступны из document.styleSheets, а stylesheet конкретного элемента доступен через его свойство sheet (доступно когда элемент находится в DOM)