Настройка CSS элемента html с текстом, введенным пользователем

На моей странице есть два текстовых поля и div. Одно текстовое поле предназначено для ввода пользователем html, а другое для ввода css. Когда нажата кнопка, я вызову функцию javascript, чтобы отобразить css и html внутри div.Настройка CSS элемента html с текстом, введенным пользователем

function handleLaunch() { 
 
    var div = document.getElementById('pane'); 
 
    var html = document.getElementById('h'); 
 

 
    var css = document.getElementById('c'); 
 

 
    div.innerHTML = html.value; 
 
    // This line obviously doesn't work div.style = css.value; 
 
}

<body> 
 
    <textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea> 
 
    <div id="pane"> 
 

 
    </div> 
 
    <br> 
 
    <textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea> 
 
    <br> 
 
    <button type="button" onclick="handleLaunch()">Launch</button>

Теперь, как установить CSS в тексте?

EDIT: Я должен был упомянуть, что хочу, чтобы в текстовом поле css было добавлено что-то вроде .classExample {text-align: center} и примените его.

источник

2016-09-30 Sidward

Во всяком случае 'div.style.cssText = css.value' позволит вам ввести CSS на входе – adeneo

К сожалению, это не сработало – Sidward

Вы уверены, что ** div.style.cssText = "background-color: red"; ** не работает? – JonSG

Да, работа с ответами @adeneo, этот фрагмент показывает это. Введите color: red;, например, как CSS, и любой текст в формате HTML ...

function handleLaunch() { 
 
    var div = document.getElementById('pane'); 
 
    var html = document.getElementById('h'); 
 

 
    var css = document.getElementById('c'); 
 

 
    div.innerHTML = html.value; 
 
    div.style.cssText = css.value; 
 
}

<body> 
 
    <textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea> 
 
    <div id="pane"> 
 

 
    </div> 
 
    <br> 
 
    <textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea> 
 
    <br> 
 
    <button type="button" onclick="handleLaunch()">Launch</button>

источник

2016-09-30 20:57:44

Это только устанавливает стиль для всего div. Я должен был уточнить, что хочу иметь возможность использовать классы и идентификаторы в текстовой области css. Имеет ли это смысл? – Sidward

Предполагая, что вы определяете свойства CSS вместе с селекторов, например, вы Css текст как

div{ 
    background:red; 
} 
.someClass{ 
    font-size:12px; 
}

и ваш HTML выглядит

<div>DIV content</div> 
<span class="someClass"> Content in someClass</span>

Вы можете добавить HTML в div.innerHTML = html.value;

Но для добавления CSS на страницу вы должны сделать следующее

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = document.getElementById('c').value; 
document.getElementsByTagName('head')[0].appendChild(style)

источник

2016-09-30 21:12:17

Спасибо! Это работает так, как я предполагал – Sidward

Настройка CSS элемента html с текстом, введенным пользователем

ответ

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