javascript - 这段代码结果为何颜色css没有被执行？

Question

<script>
    function amo()
    {
        document.write("<p class='x'>eee</p>")

        document.write("<p class='x'>eee</p>")

        document.write("<p class='x'>eee</p>")
    }

</script>
<style>
    .x{width:50px;height:50px;background-color:red;}
</style>

<input type=button onclick='amo()' value='fff'>

Answer 1

因为document.write会重写整个html的内容
原先是这样的

而你点击之后，页面源码变成了这样

也就是只有amo里面的内容了
你的style样式都被覆盖替换掉了

Answer 2

document.write();把head里的style都写掉了。。

Answer 3

因为用了，document.write，document.write会清除掉所有的doucment的内容，因此你写的style也会被清除掉，你用“审元素”看一下，会发现dom里只有你write的元素了。

Answer 4

document.write 把原来的网页覆盖了 所以你写的style也就不存在了

Answer 5

你直接用 document.write 把原文档都覆盖 了，你打开你的页面看看，