javascript - html 源中缺少 "</style>"

Question

我想用 jquery 将样式附加到 html head:

<script type="text/javascript">
var appendStyle = jQuery('<style type="text/css">body {margin: 0;}</style>');
jQuery('html > head').append(appendStyle);
</script>  

问题是 html 中缺少它。 Html 源 (ctrl + u) 将显示:

<script type="text/javascript">
var appendStyle = '<style type="text/css">body {margin: 0;}';
jQuery('html > head').append(appendStyle);
</script>

这很奇怪，因为这只发生在某些页面上。我的代码有什么问题吗？有人知道为什么 '' 被切断了吗？

Answer 1

附加整个样式表

如果您想附加整个样式表，请使用:(确保您的样式已经在 style.css 中)。

$('head').append('<link rel="stylesheet" href="style.css" type="text/css"/>');

---

更新单元素样式

如果你只想更新 1 个元素的样式(比如 body )，你不需要将它添加到头部，而是直接将样式应用于元素(它将显示内联)。

$('body').css('margin', 0); // Apply this style directly to the element

---

向头部添加多个元素

如果你必须使用你现在的方法，你可以考虑转义 </style> 中的反斜杠。 .

类似于:

<script type="text/javascript">
// Also remember the DOM ready when using jQuery! (You may have issues without it)
$(document).ready(function(){
    var appendStyle = jQuery('<style type="text/css">body {margin: 0;}<\/style>');
    jQuery('html > head').append(appendStyle);
})
</script>