如何使用 JavaScript 将样式表注入文档头部？

使用 JavaScript 将样式表注入 Head

在将 CSS 样式表添加到您的内容时，您无法修改 CMS 的 head 部分，这是一个挑战网站。但是，存在一种解决方案，即利用 JavaScript 将样式表动态注入到页面中。

要实现此目的，您可以创建一个脚本并将其放置在结束 之前。标签。在此脚本中，您可以使用 document.createElement() 方法构造一个链接元素，并将其类型设置为“text/css”，并将 rel 设置为“stylesheet”。最后，将 href 属性设置为所需的样式表文件。

这是使用普通 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 将样式表注入文档头部？的详细内容。更多信息请关注PHP中文网其他相关文章！