如何使用 JavaScript 從 Body 將樣式表注入 Head ？

使用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中文網其他相關文章！