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

这是我的 html 文件的正文。问题是，当我为这个 html 文件创建一个新的 css 文件 - metadata.css时，它包含以下内容：

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文件中添加div的样式，这是我所有的css，它变成了这样：

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 根本没有样式。你能帮我修一下吗？

4

1 回答 1

3

问题是您的 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 代替。

于 2012-09-26T12:25:19.640 回答