Question

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

编辑：我应该提到我希望能够提供类似的东西 .class示例{text-align：center}在css textarea中并适用。

Answer 1

是的，@ 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>

Answer 2

假设您正在使用选择器定义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)

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

2 个答案: