Я создаю виджет, который будет добавлен на внешние веб-сайты, и я создал страницу, которая генерирует CSS для их стиля (цвет текста, цвет фона, размер шрифта и т.д.). Я получаю текстовое поле, заполненное css для их копирования/вставки на их веб-сайт.
Есть ли способ добавить этот css на текущую страницу, чтобы иметь предварительный просмотр в реальном времени?
если вы хотите добавить текст css
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'content';
document.getElementsByTagName('head')[0].appendChild(style);
если вы хотите добавить файл css
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'css/my.css');
document.getElementsByTagName('head')[0].appendChild(link);
Я традиционно добавлял блок <style> при выполнении элементов.
var style_rules = [];
style_rules.push("#" + myElemId + " { /* Rules */ } ");
/* ... */
var style = '<style type="text/css">' + style_rules.join("\n") + "</style>";
$("head").append(style);
Важно отметить, что, поскольку вы не знаете, какой из существующих стилей или что id может конфликтовать на странице, очень полезно отслеживать ваш идентификатор внутри вашего приложения JavaScript, затем используя их для заполнения введенного блока <style>. Я также склонен запускать свои имена с помощью префиксной функции, чтобы гарантировать, что общие имена wrapper и unit не конфликтуют (они превращаются в нечто вроде myunique_wrapper и myunique_unit.
Включение базового CSS reset, подобного #myWrapper {margin: 0; padding: 0}, может стать достойной стартовой платформой для создания собственных пользовательских стилей.
Обращаясь к вашему уникальному случаю, живой просмотр, так сказать, я бы назвал div со стандартными элементами. Затем, когда они нажимают "обновить", прочитайте в правилах и добавьте их в голову. Если вы хотите отменить любые остаточные эффекты из прошлых правил, вы можете удалить последний элемент <style> или лучше, но придать элементу <style> идентификатор. Я не уверен, что этот выбор будет работать, но он должен.
Можете ли вы добавить тег style в DOM с содержимым текстовой области? Вы можете указать ему идентификатор, чтобы впоследствии его изменить.
var element = document.createElement('style');
element.setAttribute('type', 'text/css');
if ('textContent' in element) {
element.textContent = css;
} else {
element.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(element);
Я рекомендую вам начать использовать приличную инфраструктуру для разработки вашего веб-сайта и JavaScript, лично я бы пошел с jQuery.
http://api.jquery.com/css/
Здесь есть несколько фрагментов кода, которые показывают, как быстро установить свойства css для элементов.