Change style sheet using js

Question

Hi I'm making my own website and I want to be able to change the style sheet and content of the page with js.

So I wrote this:

<head>
    <link id="style" rel="stylesheet" href="css/index.css">
</head>

<header>
    <ul id="nav">
        <li> <input id="home" onclick="home()" type="image" src="vzbt.png" widht="55" height="55"></li>
        <li> <button id="links" onclick="links()">Links</button> </li>
        <li> <button id="about" onclick="about()">About Me</button> </li>
        <li> <button id="music" onclick="music()">Music</button> </li>
        <li> <button id="contact" onclick="contact()">Contact</button> </li>
    </ul>
</header>

This is the js that I wrote so far

function links(){
    document.getElementById("style").setAttribute = ("href", links.css);
}

But it doesn't work, so I want to ask if someone can help me? Please.

Usually you want to avoid using JS to change the stylesheet as it can get tricky. I'm not sure what you want to do, but consider adding more classes to your stylesheet and add/remove the classes using javascript. — Francisco, May 23 '18 at 13:15
Force loading a new CSS page will actually slow things down for your page ... the browser wants to load CSS files provided to it, so if you new look & feels for sub-pages, you should just link to that directly. In your proposed work flow, the browser will grab the HTML + CSS provided, then load JS, then use the JS to load a new CSS, and then redraw things ... way simpler for the browser to just load the right CSS in the first place. — Doug, May 23 '18 at 13:18
If this is your website, why aren't you just linking the css to the web page? — SILENT, May 23 '18 at 13:19
Possible duplicate of [How to change css href="" using javascript?](https://stackoverflow.com/questions/22445760/how-to-change-css-href-using-javascript) — Gautam Rai, May 23 '18 at 14:16
possible duplicate of https://stackoverflow.com/questions/22445760/how-to-change-css-href-using-javascript — Gautam Rai, May 23 '18 at 14:16

score 1 · Answer 1 · answered May 23 '18 at 13:17

1

My guess is you should be doing it in following way:

function links(){
    document.getElementById("style").setAttribute("href", "css/links.css");
}

As links.css is not some js variable, you should put in inside " "

answered May 23 '18 at 13:17

Ash

672
6
21

score 0 · Answer 2 · answered May 23 '18 at 13:19

Don't load any CSS into the page. On load of the page, determine which CSS and then use the following method to dynamically add the desired CSS to the page. You will need to store the chosen theme in localStorage and then use that on page load to determine the css file to load.

see: How to load up CSS files using Javascript?

score 0 · Answer 3 · answered May 23 '18 at 13:20

setAttribute is a function, not property (you try to assign a value to it with =).

function links(){
    document.getElementById("style").setAttribute("href", "css/links.css");
}

OR

function links(){
    document.getElementById("style").href = "css/links.css";
}

score 0 · Answer 4 · answered May 23 '18 at 13:20

0

function links(){
  document.getElementById("style").href = path_Of_CSS_File;
}

You can also assign the value of href to the new value.

answered May 23 '18 at 13:20

Kumar Aman

271
2
7

score 0 · Answer 5 · answered May 23 '18 at 14:20

0

I feel really stupid that I didn't figured it out sooner there was an error that "links" is not a function so I renamed it to "link" and surprise it works just fine but thanks to all of you for taking your time and trying to help.

answered May 23 '18 at 14:20

Daburu

109
1
11

Change style sheet using js

5 Answers5