Как я могу применять правила css динамически в div после того, как пользователь вводит правила

Я создаю редактор онлайнового кода для HTML/CSS/JS для курса веб-технологий. Я использовал редактор ACE для 3 соответствующих редакторов, из которых я получаю код, представленный пользователем, и переписываю содержимое div (результата) в реальном времени. Все происходит на стороне клиента, поэтому я не могу сохранить правила и импортировать их (возможно?).Как я могу применять правила css динамически в div после того, как пользователь вводит правила

У меня возникают трудности с применением правил css, которые пользователь вводит в div, который будет обрабатывать результат. Для части HTML я хватаю код из редактора HTML и переписываю код div с результатом. Я искал для решения с использованием jQuery, но все, что я пробовал, не удалось.

Любые идеи о том, как я могу реализовать что-то подобное?

var text2=editor2.getValue(); //Get the css rules that the user entered. 
var newstyle=document.createElement("style"); //Create a <style> element 
newstyle.innerHTML=text2; //Add the rules in that element.

Тогда, если я правильно понял соответствующие ответы я нашел в Интернете, мне нужно добавить в Newstyle элемент в головной части кода, который собирается записываться в DIV с result.I've пытался что-то вроде следующего, но я не могу показаться, чтобы получить это право:

var t=document.getElementById("result"); //The div with the result of the code 
t.appendChild(newstyle);

Я полагаю, что я отсутствует способ, чтобы вставить элемент стиля в голове элемента.

источник

2014-12-30 ChristosNt

Что вы пробовали до сих пор? Дайте нам некоторый код и более конкретно объясните, что у вас есть. – Antiga

http://jsfiddle.net/L9h55c37/1/ – blex

blex Ваше решение, похоже, соответствует моим потребностям так же хорошо. Я попытаюсь интегрировать его в свой код, чтобы он работал. Спасибо за вашу помощь :) – ChristosNt

Попробуйте это: http://jsfiddle.net/7ku10n0t/27/

Вставка элемента в голову может быть сделано с document.head.appendChild. Однако вы захотите убедиться, что вы не пытаетесь вставить элемент несколько раз, что (в зависимости от браузера) может вызвать некоторые напуганные вещи.

<div> 
     <textarea id="editor2" onblur="changeStyles();" style="width: 300px; height: 100px;"></textarea> 
     <p class="class1">This is class 1</p> 
     <p class="class2">This is class 2</p> 
    </div> 

<div> 
    <textarea id="editor2" onblur="changeStyles();" style="width: 300px; height: 100px;"></textarea> 
    <p class="class1">This is class 1</p> 
    <p class="class2">This is class 2</p> 
</div> 

<script>  
function doOnLoad() { 
    var newstyle = document.createElement("style"); //Create a <style> element 
    newstyle.id = "customStyle"; 
    document.head.appendChild(newstyle); 
}; 
// best practice is really to call this on DOMContentLoaded ($() for jquery) 
doOnLoad(); 

function changeStyles() { 
    var newstyle = document.getElementById("customStyle"); 
    var text2 = editor2.value; //Get the css rules that the user entered. 
    newstyle.innerHTML = text2; //Add the rules in that element. 
} 
</script>

источник

2014-12-30 19:41:57 ChrisG

Вставить HTML-страницу в стильный элемент может быть хорошей идеей. Таким образом, JavaScript не нужен, чтобы проверить, существует ли он, а если нет, создайте его. –

Спасибо! Отредактировал мой ответ для вставки при загрузке. Намного лучше реализовать ... Наверное, я не должен лениться в своем примере кода :). – ChrisG

Мне нужно будет попробовать новый код сейчас :) Leon, я также подумал о добавлении элемента стиля с самого начала (пустой), а затем введя там правила css.Я не уверен, хотя, если я должен (и как бы это сделать), переписывайте правила элемента каждый раз, когда происходит изменение, или заменяет весь элемент новым с новыми правилами. – ChristosNt

Если у вас есть HTML-код, который вы можете вставить его в DOM с помощью jQuery(...).append() или jQuery(...).prepend().

Чтобы добавить блок CSS к <head> тега, можно было бы написать что-то вроде этого:

jQuery("head").append(new_style);

Если вы предпочитаете, чтобы добавить его в result блок, вы можете использовать:

jQuery("#result").prepend(new_style);

prepend() используется, чтобы добавить его в начале.

Смотрите документацию для получения дополнительной информации:

http://api.jquery.com/

источник

2014-12-30 22:11:50

Как я могу применять правила css динамически в div после того, как пользователь вводит правила

ответ

Смежные вопросы