How to load up css files using javascript

3个答案

Common methods for loading CSS files in JavaScript include:

Creating a <link> tag using JavaScript and appending it to the <head>

javascript
var head = document.head;
var link = document.createElement('link');

link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'path/to/your/cssfile.css';

head.appendChild(link);

Using jQuery (if your project includes jQuery)

javascript
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/your/cssfile.css">');

Using the import statement in JavaScript modules

When working with modern JavaScript modules, you can utilize the import syntax.

javascript
import './path/to/your/cssfile.css';

Note that this approach typically requires build tools (such as Webpack or Parcel) to process CSS file imports.

Using the fetch API to dynamically fetch CSS content and insert it

javascript
fetch('path/to/your/cssfile.css')
    .then(response => response.text())
    .then(css => {
        var style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
    });

The following are common methods for loading CSS files in JavaScript. The choice of method depends on your specific requirements and project build environment.

2024年6月29日 12:07 回复

If you want to track (or wait) for the styles to load, you can do the following:

javascript
// This works in IE 10 and 11, as well as Safari, Chrome, Firefox, and Edge.
// Add an ES6 polyfill for Promise if needed, or rewrite using a callback.

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = () => resolve();
    link.onerror = () => reject();
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

Usage:

fetchStyle(url)
 .then(
   () => console.log("style loaded successfully"),
   () => console.error("style could not be loaded"),
 );

2024年6月29日 12:07 回复

This script will do the following:

javascript
<script type="text/javascript" src="/js/styles.js"></script>

The JavaScript file contains the following code:

javascript
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

If JavaScript and CSS are to reference your website, their URLs must be absolute.

The article "Using Branching Techniques to Say No to CSS Hacks" discusses various CSS import techniques.

However, the article "Using JavaScript to Dynamically Add Portlet CSS Stylesheets" also mentions the possibility of CreateStyleSheet (an IE-specific method):

javascript
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

2024年6月29日 12:07 回复

How to load up css files using javascript

3个答案

你的答案