Dynamically load stylesheets

2019-02-13 20:44发布

站内问答 / HTML/CSS
1410 3 6

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 SPA the content is dynamic, right? so i didn't want to import all the style-sheets in the head section with the link tag. Can i somehow import style-sheets as-and-when i need them?

I mean, can i have a link in the body, such that whenever my SPA loads some dynamic content, a style sheet also gets loaded? Such that i dont have to load all the stylesheets even when the dynamic content is not loaded..

I stress again: Whenever the content loads, the styles load.

I know i can do it with the help of an inline style like this:

~PSEUDO CODE 
<tagname style="somestyle"></tagname>

but can i have some dynamic file imports too? Can i have the link tag in the body too? Even if it works, is it standard?

标签： html css import
举报
3条回答
\"骚年 ilove
2楼-- · 2019-02-13 21:14

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) 举报
够拽才男人
3楼-- · 2019-02-13 21:22

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) 举报
疯言疯语
4楼-- · 2019-02-13 21:41

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)