Javascript OnClick change various element link colour

Question

I'm looking to change the link of the other link when they are clicked. So example if user clicks A-Z it would change the colour of 0-9.

<a href="" id="list_users_title" onclick="document.getElementById('oneline a').style.color = '#414042'; document.getElementById('list_users_title a').style.color = '#B91200';">A-Z</a>
<a href="" id="oneline" onclick="document.getElementById('oneline a').style.color = '#B91200'; document.getElementById('list_users_title a').style.color = '#414042';">0-9</a>

I can do it with the colour however this overrides the a:hover which I still would like to use.

Any help would be appreciated

Ash · Accepted Answer · 2012-06-12 21:11:29Z

1

your problem is that by the help of javascript your are adding inline css to the a tag. Inline css has more priority than the one in style tag.

Here the solution-

<div id='style'></div>

<a href="" id="list_users_title" onclick="document.getElementById('style').innerHTML = '<style>ADD CSS HERE</style>';">A-Z</a>

this will not add inline css

answered Jun 12, 2012 at 21:11

Ash

3,6212 gold badges17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sczizzo · Accepted Answer · 2012-06-12 21:22:12Z

0

When you use getElementById you should be passing in the id of the element you want. So do something like this document.getElementById('oneline') instead of document.getElementById('oneline a').

EDIT

If you don't want to override the styles, use the onclick event to add a class (say, "clicked-by-oneline") to the element instead of applying styles directly. Then use stylesheets to define some rules like this:

#oneline.clicked-by-oneline { color: #414042; }
#list_users_title.clicked-by-oneline { color: #B91200; }

Use cascading to control exactly how these style overrides will interact.

edited Jun 12, 2012 at 21:22

answered Jun 12, 2012 at 21:02

sczizzo

3,20622 silver badges28 bronze badges

5 Comments

Storm3y Over a year ago

How would I style the a:link colour rather than the colour of the element?

sczizzo Over a year ago

I would probably apply a class to the element, then use CSS to control the styles instead of applying styles directly.

sczizzo Over a year ago

Also, your a tag already has the 'oneline' id, so document.getElementById('oneline') already refers to the anchor.

Storm3y Over a year ago

Hi, Doing it like document.getElementById('oneline') sets the element colour and voids the a:hover a:visited

sczizzo Over a year ago

This is the correct behavior, given your code, which is why I would suggest using classes and CSS.

Collectives™ on Stack Overflow

Javascript OnClick change various element link colour

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related