Question

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

Answer 1

问题是你的javascript没有定位到它所在的容器。

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

将使用document.body来定位文档的主体，而不关心代码的定义位置（因此容器的类完全被丢弃...实际上被{{删除了}你要找的是innerHTML = ""，它将在定义的位置输出（并且没有清算声明）。

document.write

当您开始执行除一次性代码之外的任何操作时，通常应该使用明确的tageted选择和不显眼的JavaScript来替换它。

当在另一个css文件中设置div时，它不起作用，当设置为body时，它可以工作

1 个答案: