Switching between multiple CSS files using Javascript

Question

I'm currently trying to make a series of buttons that the user of my site can click on in order to change between different CSS3 files, which will change certain effects. In order to accomplish this goal, I need some way of accessing the

href="example1.css"

tag in my HTML, and changing it to

href="example2.css" 

using JavaScript or HTML.

Answer 1

Assign an id to your link. Fetch it in JS by its id and change the href attribute.

<link rel="stylesheet" type="text/css" href="example1.css" id="lnk"/>

In JS:

var link = document.getElementsById("lnk"); //Fetch the link by its ID
link.setAttribute("href", "example2.css"); //Change its href attribute

You can also do it without an id .

document.querySelector("link[href='example1.css']").href = "example2.css";

Answer 2

not

var link = document.getElementsById("lnk"); //Fetch the link by its ID 

but

link = document.getElementById("lnk"); 

The ID is ONE, getElementsById - is array