将文本插入HTML样式标签-JavaScript

Question

我想将HTML code标记中的一些CSS文本插入页面的<style>标记中。

我可以隔离文本内容，但似乎不允许我使用.textContent将该文本内容放入样式标签中-是否无法在JavaScript中的样式标签上进行此操作？

Codepen：https://codepen.io/emilychews/pen/YzydmGb

// GET TEXT CONTENT OF CODE TAG
var CSSInner = document.getElementById("language-css-js").textContent;

// INJECT TEXT CONTENT BETWEEN STYLE TAGS
function resultInsertCSS() {
  document.getElementById("result-pane-style-tag").textContent = CSSInner;
}

resultInsertCSS();

<code id="language-css-js">
  h2 {
  line-height: 1.2;
  }
  p {
  line-height: 1.5;
  }
</code>

<style id="#result-pane-style-tag"></style>

Answer 1

当然可以。直接分配样式可能会更好，但是如果您只是想按照自己的描述来做，这是一个有效的示例。

https://repl.it/@nicholashazel/ExpertSpecializedStructs

<code id="language-css-js">
  h2 {
  line-height: 1.2;
  color: red;
  }
</code>

<style id="result-pane-style-tag"></style>
<h2>Hello</h2>
<script>
  let stuff = document.getElementById('language-css-js').innerHTML;
  document.getElementById('result-pane-style-tag').textContent = stuff;
</script>

[另外，如其他答案所述，它本身就是ID的事实就赋予了它#属性，因此将其添加到ID中是无关紧要的。

ID应该为result-pane-style-tag在CSS或jQuery中引用ID，您可以使用#result-pane-style-tag，但如果使用getElementById，您只需将其作为名称即可引用。

Answer 2

<style id="#result-pane-style-tag"></style>

应该是

<style id="result-pane-style-tag"></style>

没有＃。

Answer 3

删除ID之前的＃，以下代码应该起作用：

// GET TEXT CONTENT OF CODE TAG
var CSSInner = document.getElementById("language-css-js").innerHTML;

// INJECT TEXT CONTENT BETWEEN STYLE TAGS
function resultInsertCSS() {
  document.getElementById("result-pane-style-tag").textContent = CSSInner;
  document.getElementById("language-css-js").innerHTML=""
}

resultInsertCSS();