CODEWITHSUNDEEP
javascriptcsshyperlinkhref
JoeW
JoeW

Reputation: 588

Removing unwanted CSS from a link with Javascript

I need a link on our site to not inherit the CSS rules of the page - at the moment it shows with a border and underline etc which is not desirable for this particular link.

I seem to vaguely remember being able to change the href to as <a href="javascript:;"></a> which effectively overrides the CSS but I don't remember how to make the link go to the required page. Can you fill me in? Thanks!

Upvotes: 0

Views: 117

Answers (1)

bfavaretto
bfavaretto

Reputation: 71918

You have to override the styles being defined on the stylesheet. There are several ways to do that (examples below set color to red, but you'll actually have to set border: 0; text-decoration: none;).

Inline styles

<a href="#" id="thelink" style="color:#f00;">link text</a>

JavaScript

document.getElementById('thelink').style.color = '#f00';

External CSS or <style> block (if you can add a specific CSS rule for this element)

#thelink { color: #f00; }

If the above doesn't work because of some more specific selector taking precedence:

#thelink { color: #f00 !important; }

Upvotes: 2

Related Questions