Removing unwanted CSS from a link with Javascript

Question

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!

The link is actually an image. All images on our site have padding and a border added. I remember only vaguely the javascript solution which overrides the CSS regardless of what rules are there (useful in case those rules are added to later on). — JoeW, Commented May 19, 2012 at 14:18
Why don't you add a css class to the link to reset the css styles? — jfrej, Commented May 19, 2012 at 14:28
And to answer your question about making the link go to the required page, you can do href="javascript: document.location.href='http://www....';" But you should follow @bfavaretto's answer instead. — jfrej, Commented May 19, 2012 at 14:51

bfavaretto · Accepted Answer · 2012-05-19 22:15:48Z

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

Collectives™ on Stack Overflow

Removing unwanted CSS from a link with Javascript

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related