Динамически добавлять css на страницу через javascript

Question

Я создаю виджет, который будет добавлен на внешние сайты, и я создал страницу, которая генерирует CSS для их стиля (цвет текста, цвет фона, размер шрифта и т. Д.). , Я получаю текстовое поле, заполненное css, для их копирования/вставки на их веб-сайт.

Есть ли способ добавить этот css на текущую страницу, чтобы просмотреть предварительный просмотр?

Answer 1

Можете ли вы добавить тег style в DOM с содержимым текстовой области? Вы можете указать ему идентификатор, чтобы впоследствии его изменить.

Answer 2

Я рекомендую вам начать использовать приличную инфраструктуру для разработки вашего сайта/JavaScript, лично я бы пошел с jQuery.

http://api.jquery.com/css/ 

Здесь есть некоторые фрагменты кода, которые показывают, как быстро установить свойства css для элементов.

Answer 3

При создании элементов я традиционно добавлял блок <style>.

var style_rules = []; 

style_rules.push("#" + myElemId + " { /* Rules */ } "); 
/* ... */ 

var style = '<style type="text/css">' + style_rules.join("\n") + "</style>"; 
$("head").append(style); 

Важная вещь, чтобы отметить, что, потому что вы не знаете, что любой из существующих стилей, или то, что id «s могут конфликтовать на странице, это очень полезно, чтобы следить за вашими идентификаторами внутри вашего JavaScript, а затем использовать их для заполнения введенного блока <style>. Я также, как правило, запускать мои имена через функцию приставкой для обеспечения того, чтобы общие имена wrapper и unit не противоречат друг другу (они превращаются в нечто вроде myunique_wrapper и myunique_unit.

Включение основной сброс CSS, как #myWrapper {margin: 0; padding: 0} может быть достойную стартовую платформу для создания собственных пользовательских стилей.

Обращаясь к вашему уникальному случаю, в прямом эфире, так сказать, я бы назначил div со стандартными элементами. Затем, когда они нажимают «обновить», прочитайте в правилах и добавьте их в Если вы хотите отменить любые остаточные эффекты из прошлых правил, вы можете удалить последний элемент <style> или еще лучше датьЭлемент- идентификатор. Я не уверен, что такой выбор будет работать, но он должен.

Answer 4

если вы хотите добавить 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); 

Answer 5

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);