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 代码无关。我只是用它作为例子。
1 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
您可以使用模板文字
模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。
使用普通字符串，您必须使用以下语法才能获取多行字符串：
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"
使用模板文字，您可以执行相同的操作，如下所示：
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
在你的情况下：
document.querySelector( "style" ).innerHTML +=
`html {
background-color: #0dd;
}`;
添加回答
举报
0/150
提交
取消