如何更改CSS文件或隐藏 <link> 标签

Question

I want to change the design of my site by changing the CSS file attached. I have tried with script when the link is with id "link"

var x = document.getElementByID ("link")
X.href = style2

It didn't work.

The other thing I tried was to hide the <link> tag which had class "linkclass"

<style>
link.linkclass {
  visibility:hidden;
}
</style>

But it didn't work either.
Can someone help.
Sorry if the code is bad formatted but I can't get how to format code in stack overflow

Answer 1

Three things wrong with this:

1. javascript is case sensitive. That means X is a different variable than x
2. style2 is not a valid URL. You have to use an URL to an existing .css file
3. <link> is not a visible element. Hiding an element that isn't visible in the first place accomplishes nothing.

This works:

var x = document.getElementByID("link");
x.href = "http://url/to/your/style2.css";
// ^ notice the lowercase x

Answer 2

You could do

$("#link").disabled = true;

This may also work.

document.getElementByID("link").disabled = true;

There is also another Stack question that addresses this here. Removing or Replacing a Stykesheet

update

You say you are trying to change the stylesheet. You could create a function to do it like this.

function styleSheetSwitcher( newFile ){
    $("#link").prop("href", newFile);
}

styleSheetSwitcher("myNewCss.css");

Answer 3

If you wanna hide element (I got that impression from your examples), your javascript code should look like this:

var x = document.getElementById("link");
x.style.display = 'none';

Also take care with following:

-uppercase letters getElementbyId

-you're missing semicolon (;) after first expression

-your variable "x" is uppercase in second row("X").

In most cases this should be enough to disable element with CSS, just add this class (linkclass) to element which you want to hide:

<style>
.linkclass {
  display: none;
}
</style>