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

Question

我在 HTML code 标签中有一些 CSS 文本，我想将其插入到页面上的 <style> 标签中。

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

代码笔：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();

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

Insert Text Into an HTML Style Tag - JavaScript

html

javascript

css

text

innerhtml