Question

我想用jquery将样式追加到html头：

<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>

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

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>

Answer 2

一旦页面文档对象模型（DOM）准备好执行JavaScript代码，就加载jQuery。

$( document ).ready(function() {
    var appendStyle = '<style type="text/css">body {margin: 0;}';
    $('html > head').append(appendStyle);
});

简写：

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

Answer 3

我刚刚解决了这个问题。似乎有一些javascript代码切断了任何结束标记。即使我把

var example = '</example>'

如果关闭它会切断。所以我做的是：

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

Answer 4

您可以简单地创建一个类

.body {
   margin: 0;
}

并包含jquery

$('body').addClass('body');

缺少＆＃34;＆＃34;在html源代码中

4 个答案:

附加整个样式表

更新单个元素样式

在头部添加多个元素