How to add another text decoration definition with Javascript?

Question

I want to add another text decoration class with the help of JavaScript to the link which already has a class associated to it.

I want something like the <a> activated link should have the text:decoration=none but i am not able to do it with CSS because it gets applied to all the links, then if I declare a new class of no decoration.

How is this possible with JavaScript?

Answer 1

You can do it like this:

var elem = document.getElementById('ELEMENT_ID_HERE');
elem.style.textDecoration = 'none';

Answer 2

If you want to use CSS classes:

var element = document.getElementById(idOfElement);
element.className = element.className + " noDecorationClass";

This adds a new class to the element, you may also overwrite the existing one.

element.className = "noDecorationClass";

Answer 3

I would recommend using a framework like mootools (http://mootools.net/).

With the framework its as simple as:

element.addClass('my_new_css_class');

or you could just add a new style

element.setStyle('text-decoration', 'none');

Answer 4

If you set an unique ID to all the links you use and then refer to the link in your script you can change whatever links you want to change by:

document.getElementById('YourLinksId').style.textDecoration = 'overline';
document.getElementById('yourLinksId').onmouseover.style.textDecoration = 'blink';

The style you set directly on the element will overrid any attributes set in the css class.

Edit: Sorry I think I misunderstood your question. If you mean activated as when the link has been clicked, mouseover ect you can do the following:

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

More resources at w3schools

Answer 5

An active link is only active while it is being clicked on.

As soon as you release the mouse button, it no longer has an active state. Therefore you can use a a:active that applies to all links as only one will ever be active at a time.

I'm guessing that you really want it to retain your text-decoration: none until another link is clicked in which case you will need JavaScript. If I'm wrong, just follow @ChrisAD's example, but add:

a:active {color: #0000FF;

text-decoration: none;

} /* selected link */