php - 当在另一个 css 文件的 div 上设置时它不起作用，当设置为 body 时，它起作用

Question

<script>
    var obj = {{ data|raw }}
    document.body.innerHTML = "";
    document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));  
</script> 

这是我的 html 文件的主体。问题是，当我制作一个新的 css 文件时 - metadata.css 只是为了这个 html 文件，它包含以下内容:

body {
    white-space: pre-wrap; 
    width: 770px;
} 

一切正常。但我不需要这个新文件。所以我尝试将我的 html 更改为:

<div class="metadata">
    <script>
        var obj = {{ data|raw }}
        document.body.innerHTML = "";
        document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));  
    </script> 
</div>

并在我所有的 css 所在的 css 文件中添加 div 的样式，它变成了这样:

body {
    text-align: center;
}

table{
    width: 100%;
    border-collapse:collapse;
    margin: 20px 0px;
}

table,th, td{
    border: 1px solid black;
    font-size: 17px;
}

th {
    background-color: #D3D3D3;
    font-weight: bold;
}

td {
   padding: 3px 5px; 
}

a.pagination {
    margin: 9px;
}

span {
    font-weight: bold;
}

.find_page {
    margin: 20px;
}

form input {
    width: 50px;
}

.metadata {
    white-space: pre-wrap; 
    width: 770px;
    text-align: left;
}

但问题是，以这种方式，它不起作用 - 我认为 div 根本没有样式。你能帮我解决一下吗？

Answer 1

问题是您的 javascript 没有针对它所在的容器。

    document.body.innerHTML = "";
    document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));  

将以文档的主体为目标，因为它使用的是 document.body，而不关心代码的定义位置(因此容器的类被完全丢弃......实际上由 innerHTML = "" 语句删除。您要查找的是 document.write，它将在定义位置输出(并且没有清除语句)。

 document.write(document.createTextNode(JSON.stringify(obj, null, 4)));  

当您开始做的不仅仅是一次性代码时，这通常应该被明确标记的选择和不引人注目的 JavaScript 所取代。