Dynamically load stylesheets

后端未结

关注

 3  559

i know that you can have style-sheets in the head of a page, but i like to have them in a separate file. Now i\'m working with a single page application.

Well in an

相关标签:

3条回答

一向

2021-01-02 14:47
You should look into asychronously loading assets, such as the famous google-analytics code. You can load external stylesheets using Javascript.

JavaScript
```
(function(){
  var styles = document.createElement('link');
  styles.rel = 'stylesheet';
  styles.type = 'text/css';
  styles.media = 'screen';
  styles.href = 'path/to/css/file';
  document.getElementsByTagName('head')[0].appendChild(styles);
})();
```
Lines 1 and 7 create a new scope for variables such that local variables do not collide or override with globally scoped variables. It isn't necessary just a best practice. This solution also assumes you have a <head> tag in your html.
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2021-01-02 14:50
I just tried to give dynamic styling to my webpage. I used a button. On click of it, the CSS will get imported using a method in Javascript.

In my html, I have:
```
<button type="button" onclick="changeStyle()"> CLICK TO SEE THE MAGIC!! </button>
```
Then in Javascript, I have a method named changeStyle():
```
  function changeStyle()
  {
    var styles = document.createElement('link');
    styles.type="text/css";
    styles.rel="stylesheet";
    styles.href="./css/style.css";
    document.head.appendChild(styles);
 }
```
It worked perfectly.
0 讨论(0)
发布评论:

提交评论
- 加载中...

一个人的身影

2021-01-02 14:51

You can add/remove/edit link tags in your head area with java script to add/remove stylesheet files.

Code example:

Add a stylesheet to the head:

var newstyle = document.createElement("link"); // Create a new link Tag
// Set some attributes:
newstyle.setAttribute("rel", "stylesheet");
newstyle.setAttribute("type", "text/css");
newstyle.setAttribute("href", "filename.css"); // Your .css File
document.getElementsByTagName("head")[0].appendChild(newstyle);

To remove or edit a stylesheet you can give every stylesheet an id attribute and access it with this:

document.getElementById('styleid')

Or you can loop through all link tags in the head area and find the correct one but I suggest the solution with the ID ;)

Now you can change the href attribute:

document.getElementById('styleid').setAttribute("href", "newfilename.css");

Or you can remove the complete tag:

var styletorem = document.getElementById('styleid');
styletorem.parentNode.removeChild(styletorem)

0 讨论(0)