使用用户输入的文本设置html元素的CSS

我的页面有两个textareas和一个div。一个textarea用于输入html，另一个用于输入css。当一个按钮被点击时，我会调用一个javascript函数来显示div内的css和html。使用用户输入的文本设置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的文字？

编辑：我应该提到，我希望能够在css textarea中放入类似 .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 textarea中使用类和id。这有意义吗？ – 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

使用用户输入的文本设置html元素的CSS

回答

相关问题