如何使用 JavaScript 从 Body 将样式表注入到 Head 中？-css教程-PHP中文网

如何使用 JavaScript 从 Body 将样式表注入到 Head 中？

Barbara Streisand

发布： 2024-11-14 19:34:02

原创

638 人浏览过

How to Inject a Stylesheet into the Head with JavaScript from the Body?

使用Body中的JavaScript将样式表注入Head

无法编辑

当需要向网站添加 CSS 样式表时，CMS 的部分可能会带来挑战。这个问题可以通过利用 JavaScript 将样式表直接注入到中来解决。部分，即使脚本本身附加到的末尾。

为了实现这一点，需要一个新的元素是使用 JavaScript 动态创建的。此元素配置有适当的属性：

type: "text/css"
rel: "stylesheet"
href: 样式表的 URL被加载

创建后，元素被附加到

上。

示例：

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

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

  head.appendChild(link);
}

addCss('{my-url}');

登录后复制

此代码创建一个新的部分具有指定 href 的元素并将其附加到

中

使用 jQuery：

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

addCss("{my-url}");

登录后复制

注意： 虽然技术上可以附加

元素部分，不建议这样做，因为它违反了 HTML 规范。因此，最好将该元素附加到。有关合规性和未来潜在的浏览器兼容性问题的部分。

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