Нужна помощь в настройке
скрипта 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 {
здесь его стили
}
Простой
