Question

我们说我编写了一个函数，该函数在两个不同的HTML标记内写入一些文本，然后将其写入按钮onClick。问题是CSS样式没有被应用到那些标签...但是当我将相关代码 放在函数之外 时，它可以正常工作。

我的 JS代码，

DefaultTableModel

CSS代码

let i;
function myFunction() {
            for (i=0; i<10; i++){
                if (i % 2 == 0) {
                    write_this = "<green>This</green>"
                }
                else {
                    write_this ="<red>That</red>"
                }
                document.write(write_this)
            }

}

HTML

green {
    color: green;
}

red {
    color: red;
}

按一下按钮，希望它能正确完成工作...但是这些CSS颜色没有被应用到相关文本上

为什么不起作用？
如何实现我想要的？

Answer 1

您应该使用innerHTML而不是write来避免先擦除整个文档。

关于write()

https://developer.mozilla.org/en-US/docs/Web/API/Document/write

注意：当document.write写入文档流时，在关闭的（已加载）文档上调用document.write会自动调用document.open， which will clear the document 。

关于innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Element属性innerHTML获取或设置元素中包含的HTML或XML标记。

您可能想做的更像是：

let i;

function myFunction() {
  var write_this = "";// prepare your var to update on the loop
  for (i = 0; i < 10; i++) {
    if (i % 2 == 0) {
      write_this = write_this + "<green>This</green>"
    } else {
      write_this = write_this + "<red>That</red>"
    }
    
    // you may use a container
    document.getElementById("mybox").innerHTML = write_this;
  }

}

green {
    color: green;
}

red {
    color: red;
}

<input type="button" onclick="myFunction()" value="My Button">
<p id="mybox"></p>

Answer 2

您的函数执行document.write（write_this）->实际上是用新内容替换当前文档

因此您以前的html（包括样式）将从文档中删除...

更改为：

function myFunction() {
      for (i = 0; i < 10; i++) {
        if (i % 2 == 0) {
          write_this = "<green>This</green>"
        }
        else {
          write_this = "<red>That</red>"
        }
        document.body.innerHTML = write_this; // <------------
      }

CSS不适用于标签，write（）方法包含在函数内部

2 个答案: