Changing the href of a link tag using JavaScript

Issue

I am trying to change the href of a link tag so that when a button is pressed a new style sheet is loaded.

function addcss()
{
var findlink = document.getElementsByTagName("link");
findlink.href = "stylesheetxhtml.css";
}

Solution

You can’t set the href directly like that, because document.getElementsByTagName returns all the <link> tags (as a NodeList). If you’re positive you only have one, use this:

var findlink = document.getElementsByTagName("link");
findlink[0].href = "stylesheetxhtml.css";

If you have multiple <link> elements and want to target a specific one, give it an id and use document.getElementById:

var findlink = document.getElementsById("myLinkId");
findlink.href = "stylesheetxhtml.css";

Finally, if you want to create a new <link> element, use document.createElement:

var newLink = document.createElement('link');
newLink.href = "stylesheetxhtml.css";
document.getElementsByTagName("head")[0].appendChild(newlink);

Answered By – bfavaretto

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.