How to Inject CSS Stylesheet as a String Using JavaScript?

Injecting CSS Stylesheet as a String with JavaScript

Enhancing the appearance of web pages is essential for user engagement and customization. In this context, the challenge arises when you need to dynamically inject CSS styles using JavaScript, particularly when dealing with browser extensions that require the ability to modify the style of their internal pages.

For such scenarios, a simple and effective approach is to leverage the textContent property of the HTML element. By creating a new style element, setting its textContent with the desired CSS rules, and appending it to the document head, developers can inject a complete stylesheet into the page.

Here's an example:

<code class="javascript">function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}

addStyle(`
  body {
    color: red;
  }
`);

addStyle(`
  body {
    background: silver;
  }
`);</code>

This technique sequentially injects the provided CSS rules, allowing the developer to define multiple styles as needed.

Alternatively, a slightly different approach using a closure can replace the existing CSS stylesheet with each subsequent call to the addStyle function:

<code class="javascript">const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => style.textContent = styleString;
})();

addStyle(`
  body {
    color: red;
  }
`);

addStyle(`
  body {
    background: silver;
  }
`);</code>

It's important to note that this method may reach the maximum number of stylesheets allowed in certain browser versions, especially in older versions of Internet Explorer. In such cases, using the first approach is more appropriate.

By leveraging the textContent property of the element, developers can effortlessly inject custom CSS styles as a string, offering greater flexibility and customization options when creating browser extensions or any web page that requires dynamic styling capabilities.

The above is the detailed content of How to Inject CSS Stylesheet as a String Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!