Dynamically load stylesheets

Question

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

Answer 1

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:

 CLICK TO SEE THE MAGIC!! 

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.