Question

当我将此代码插入到我的文件中时，它似乎会阻止我的CSS显示。我创建了一个脚本，一旦页面加载就尝试打印文本，然后我将用它来制作一个加载的栏。这是我的代码。所有这一切都是我在页面上打印“测试”文本。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="custom.css">
    <script>
    function myFunction() {
    document.getElementById('index').innerHTML = "test";
    }
    </script>
</head>

<!-- Page Body -->
<body id="index" onload="myFunction()">
    <div class="header">
        <div id="headerbar"></div>
        <ul id="">
    </div>
</body>
</html>

Answer 1

当您设置innerHTML元素的index时，它会完全替换正文中的所有内容。因此，您不再拥有DIV类header，并且您不再拥有DIV ID {1}}。您的CSS没有任何内容可供参考。就像你写的那样：

headerbar

Answer 2

好吧，我们无法知道你的CSS做了什么，但我看到的问题是当你使用innerHTML时它会覆盖现有的HTML。正如在body标记内的所有内容都被覆盖，只是测试文本。

警告：我的假设是你身上也没有风格。

Answer 3

当你将body元素的innerHTML设置为＆＃34; test＆＃34;时，你的CSS究竟应该用什么风格？？您可以通过执行此操作来删除所有其他包含的元素。

我想你想要做的是添加一个这样的文本节点：

document.body.appendChild(document.createTextNode("test"));

阻止CSS的JavaScript代码

3 个答案: