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

标签 javascript html css

我的页面有两个文本区域和一个 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 设置为文本?

编辑:我应该提到我希望能够放置类似 .classExample{text-align:center} 在 css textarea 中并应用它。

最佳答案

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

关于javascript - 使用用户输入的文本设置 html 元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39799860/

相关文章:

javascript - React + Flux, ES6, Babel ActionCreate using json-server and super agent, 数据不响应

javascript - 使用 Javascript 中的随机数填充 Textfield 中的值

html - 完美居中(响应式?)div

php - mysqli where 子句与 php 出现错误

javascript - 前端最小化加载时间

JavaScript 选项卡式文件夹在 Internet Explorer 中不起作用

html - 用户可调整最大宽度/高度的 Div

javascript - Botium-Core - 只需要断言 Alexa 响应的某些部分

c# - 用户名的正则表达式?

html - 将 <p> 与左浮动 div 一起使用会导致第二个 div 低于第一个 div