代码之家 › 专栏 › 技术社区 › john c. j.

在输出中编辑JS和CSS

javascript

john c. j. · 技术社区 · 3 年前

下面是一个有趣的技巧,如何在输出中查看和编辑CSS和JS。例如,在输出的右边,可以从 red 到 blue .

我的问题是,为什么我不能以同样的方式修改脚本打印的文本?我的意思是,不管编辑了什么,打印出来的文本仍然是 foo bar

<div></div>

<p>The contents of the <code>&lt;style&gt;</code> tag:</p>

<style contenteditable>
  div {
    color: red; /* You can change the color right in the **output**! */
  }

  script {
    background: lightgray;
  }

  style {
    background: aliceblue;
  }

  script, style {
    display: inline-block;
    font-family: monospace;
    white-space: pre-wrap;
    width: 100%;
  }
</style>

<p>The contents of the <code>&lt;script&gt;</code> tag:</p>

<script contenteditable>
  function timer() {
    /* You cannot do the same trick to replace foo with bar... */
    document.querySelector('div').append('foo ');
  }

  setInterval(timer, 1000);
</script>

1 回复 | 直到 3 年前

syduki 3 年前

script 脚本 脚本 在此处标记:

<div></div>

<p>The contents of the <code>&lt;style&gt;</code> tag:</p>

<style contenteditable>
  div {
    color: red; /* You can change the color right in the **output**! */
  }

  script {
    background: lightgray;
  }

  style {
    background: aliceblue;
  }

  script, style {
    display: inline-block;
    font-family: monospace;
    white-space: pre-wrap;
    width: 100%;
  }
</style>

<p>The contents of the <code>&lt;script&gt;</code> tag:</p>

<script id="code" contenteditable>
  document.querySelector('div').append('foo ');
</script>

<script>setInterval(() => eval(code.textContent), 1000)</script>