ユーザーが入力したテキストでhtml要素のCSSを設定する

マイページには2つのテキストエリアとdivがあります。 1つのテキストエリアは、ユーザーがhtmlを入力するためのもので、もう1つはcssを入力するためのものです。ボタンをクリックすると、div内にcssとhtmlを表示するjavascript関数を呼び出します。ユーザーが入力したテキストでhtml要素のCSSを設定する

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を設定するには？

編集：私は.classExample {text-align：center}のようなものをCSSのテキストエリアに入れて、それを適用できるようにしたいと述べたはずです。

出典

2016-09-30 Sidward

を行う必要があります入力中 – adeneo

残念ながらそれは動作しませんでした – Sidward

確かに** div.style.cssText = "背景色：赤"; **は動作しませんか？ – JonSG

はい、@adeneoの回答が動作します。このスニペットには表示されています。 ... CSS、およびHTMLなどのテキストとして例えばcolor: red;を入力し

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のテキストエリアでクラスとIDを使用できるようにする必要があることを明確にすべきでした。これは理にかなっていますか？ – Sidward

たとえば、あなたはテキストであるCSS、あなたはセレクターと一緒にCSSプロパティを定義していると仮定すると

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

のような

し、HTML

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

のように見えます

あなたはdiv.innerHTML = html.value;

としてHTMLを追加することができますしかし、あなたのページにCSSを追加するために、あなたはとにかく `div.style.cssText = css.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

ユーザーが入力したテキストでhtml要素のCSSを設定する

答えて

関連する問題