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

Injecting Stylesheet into Head with JavaScript in Body

The inability to edit the section of a CMS can pose a challenge when needing to add a CSS stylesheet to a website. This issue can be resolved by utilizing JavaScript to inject the stylesheet directly into the section, even if the script itself is appended to the end of the tag.

To achieve this, a new element is created dynamically using JavaScript. This element is configured with the appropriate attributes:

• type: "text/css"
• rel: "stylesheet"
• href: The URL of the stylesheet to be loaded

Once created, the element is appended to the section using the appendChild() method on the Document.head object.

Example:

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}');

This code creates a new element with the specified href and appends it to the section.

Using jQuery:

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

addCss("{my-url}");

Note: While it is technically possible to append the element to the section, it is not recommended as it violates the HTML specification. Therefore, it is preferable to append the element to the section for compliance and potential future browser compatibility issues.

以上是如何使用 JavaScript 從 Body 將樣式表注入 Head ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！