document.querySelector( "style" ).innerHTML +=
"html {" +
" background-color: #0dd;" +
"}";
html {
background-color: #fff;
font-family: Arial;
}
body {
display: flex;
justify-content: center;
}
td {
background-color: #fafafa;
}
th:first-child, td:first-child {
border-left-style: none;
}
th:last-child, td:last-child {
border-right-style: none;
}
th:first-child {
border-top-left-radius: 1rem;
}
th:last-child {
border-top-right-radius: 1rem;
}
tr:last-child td {
border-bottom-style: none;
background-color: #efefef;
}
tr:last-child td:first-child {
border-bottom-left-radius: 1rem;
}
tr:last-child td:last-child {
border-bottom-right-radius: 1rem;
}
<html>
<head>
<style>
::selection {
background-color: #0df; color: #0df;
}
table, th, td {
padding: 1rem;
border-style: solid;
border-color: #eee;
border-collapse: collapse;
}
table {
margin-top: 1rem;
border-style: none;
}
th {
border-top-style: none;
border-color: #111;
background-color: #222;
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<table>
<tr> <th>One</th><th>Two</th><th>Three</th> </tr>
<tr> <td>four</td> <td>five</td><td>six</td> </tr>
<tr> <td>seven</td> <td>eight</td><td>nine</td> </tr>
</table>
</body>
</html>
document.querySelector( "style" ).innerHTML +=
"html {" +
" background-color: #0dd;" +
"}";
我有大量的 HTML/CSS 文件内容，我想将它们“注入”到网页的某些部分，就像我style在本例中使用标签所做的那样。
我希望保持这些文件不变，如下所示：
document.querySelector( "style" ).innerHTML += "
html {
background-color: #0dd;
}
";
无需将每个 JavaScript 行用引号括起来，并在每行末尾添加 + 运算符。
我是否必须将所有代码转换为这种格式？或者 JavaScript 中是否有一种方法可以将此 HTML/CSS 代码按原样添加到元素中；无需逐行更改原始代码的格式？
与这里具体的 CSS 和 HTML 代码无关。我只是用它作为例子。
慕雪6442864
相关分类