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.

You can do this two ways: using vanilla js, or jquery. This question was asked and answered here: stackoverflow.com/questions/11522545/… — user3140669
– user3140669, Commented May 22, 2015 at 16:50

Zee · Accepted Answer · 2015-05-22 16:45:02Z

10

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";

answered May 22, 2015 at 16:45

Zee

8,4805 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrei Bazanov Over a year ago

Spelling mistake. getElementsById should be getElementById since really, the Id should be unique, and hence there should be only one of it.

CroMagnon · Accepted Answer · 2016-12-13 11:22:15Z

0

not

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

but

link = document.getElementById("lnk");

The ID is ONE, getElementsById - is array

edited Dec 13, 2016 at 11:22

CroMagnon

1,2047 gold badges21 silver badges32 bronze badges

answered Dec 13, 2016 at 10:20

Dudar Mykola

971 silver badge2 bronze badges

Collectives™ on Stack Overflow

Switching between multiple CSS files using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related