Changing the href of a link tag using javascript

Question

Hi I am trying to change the href of a link tag so that when a button is pressed a new style sheet is loaded. This is what I have so far-

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

Any Help Much appreciated Thanks

Answer 1

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