How to change CSS file or hide tag

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

https://davidwalsh.name/add-rules-stylesheets a nice article about this lengthy topic — NachoDawg, Mar 30 '16 at 13:55
Could it be just a typo? the code you wrote won't work because you define variable `x` and try to use variable `X` — dcohenb, Mar 30 '16 at 14:01
@rafaelcpalmeida your proposed edit removes one of the key problems from the question. Never change the code itself, only whitespace. — Gerald Schneider, Mar 30 '16 at 14:01
It is not a typo. In the original document they are both x and x but I posted this from the phone and it corrected x to X — Venelin Minchev, Mar 30 '16 at 14:06

score 2 · Answer 1 · answered Mar 30 '16 at 14:00

2

Three things wrong with this:

javascript is case sensitive. That means X is a different variable than x
style2 is not a valid URL. You have to use an URL to an existing .css file
<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

answered Mar 30 '16 at 14:00

Gerald Schneider

My phone corrected the x to X but in the original document they are both x. the style2.CSS is in the same folder as the HTML file – Venelin Minchev Mar 30 '16 at 14:08
How must it be written x.href = address or x.href = "address" – Venelin Minchev Mar 30 '16 at 14:31
Thank you! It worked! The problem was there was no "" at the x.href = "style2" – Venelin Minchev Mar 30 '16 at 14:46

score 0 · Answer 2 · edited May 23 '17 at 12:24

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

score 0 · Answer 3 · answered Mar 30 '16 at 14:12

0

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>

answered Mar 30 '16 at 14:12

pegla

Thank you! The uppercase is a result I didn't copy it from the original document but wrote it again on my phone. – Venelin Minchev Mar 30 '16 at 14:15
Glad to be of help, you can up vote answer if it helped, thanks. – pegla Mar 30 '16 at 18:08

3 Answers3