如何使用 JavaScript 将样式表添加到 Head 部分？

在 Body 中使用 JavaScript 添加样式表到 Head 部分

如果您遇到需要向网站头部添加 CSS 样式表的场景节，但无法直接编辑头部，您可以使用 JavaScript 代码动态注入样式表。尽管建议在头部插入链接元素，但大多数浏览器都能在正文中很好地处理它。

以下是实现此目的的方法：

function addCss(fileName) {
  var head = document.head;
  var link = document.createElement("link");

  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = fileName;

  head.appendChild(link);
}

addCss('{my-url}');

使用 jQuery 的更简单方法:

function addCss(fileName) {
  var link = $("<link />", {
    rel: "stylesheet",
    type: "text/css",
    href: fileName
  });
  $('head').append(link);
}

addCss("{my-url}");

您也可以不附加到正文的末尾（从技术上讲，这不是链接元素的推荐位置）使用 JavaScript 将其直接插入到标题部分：

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

通过使用 JavaScript，您可以有效地将样式表添加到网站的标题部分，即使您无权直接编辑标题本身。

以上是如何使用 JavaScript 将样式表添加到 Head 部分？的详细内容。更多信息请关注PHP中文网其他相关文章！