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

これは私のhtmlファイルの本体です。問題は、新しいcssファイルを作成するときです-このhtmlファイルのためだけに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)));

これは通常、1 回限りのコード以外の何かを開始するときは、明示的にタグ付けされた選択と目立たない JavaScript に置き換える必要があります。

于 2012-09-26T12:25:19.640 に答える