Changing pseudo classes

I am trying to change the color of a links pseudo class using DOM.

My style sheet sets the colors.
a:link, a:visited{ color:#ccc; )
a:hover{ color:#f00; )

The link's onclick calls a js function that sets the link's style.color property.
this.style.color='#fff';

However, then the pseudo classes set in the style sheet are over ridden. (No hover)

Can anyone tell me what the syntax is to change the a:link? I tried
this:link.style.color = '#fff';
but get `SyntaxError: invalid label'

Thanks for your help.

I think you're trying to solve the wrong problem. Instead of setting any styles directly, add a className to the element, and code a style for that class.

<style type="text/css">
a:link, a:visited {
background-color: #000;
color: #ccc;
}
a:hover {
background-color: #000;
color: #f00;
}
a.clicked:link, a.clicked:visited {
background-color: #000;
color: #fff;
}
</style>
<script type="text/javascript">
function clickMe (el) {
var clicked = el.className.indexOf('clicked') > -1 ? true : false;
if (clicked) {
el.className.replace(/\bclicked\b/ig, '');
} else {
el.className += ' clicked';
}
return false;
}
</script>
...
<a href="#" onclick="return clickMe(this);">Link text</a>

Of course, one might ask why you're using a link to do this in the first place. Links are meant to be followed.

If any browser fully supported DOM2 CSS (more specifically, supported the override stylesheet), one could simply do:

onclick='document.getOverrideStyle(this, "link").setProperty("color", "#fff", "");'

But no browser, not even Opera 7 or Mozilla nightlies, support the override stylesheet. So the best you can do it without resorting to choopernickel's method is iterate through the cssRules of the stylesheets, and test for rule.selectorText.indexOf("a:link"), then set rule.style.color="#fff" on it.

Thanks to both of you for answering. Problem solved.

I used Choopernickel's suggestion of another class.

Of course, one might ask why you're using a link to do this in the first place. Links are meant to be followed.

This is a portfolio site for some designers. All the content is on one page and uses DHTML to change the content w/o loading a new page. I did want the clicked link to change color to indicate that content is currently displayed.

Of course, one might ask why you're using a link to do this in the first place. Links are meant to be followed.
This is a portfolio site for some designers. All the content is on one page and uses DHTML to change the content w/o loading a new page. I did want the clicked link to change color to indicate that content is currently displayed.

My only point is this: it doesn't have to be a link. It can be any element at all with an onclick listener. Don't limit yourself to what you've used the past few years; the latest stuff outdates all that and is ridiculously impressive. That's all.

Now: what happens if the user agent doesn't support javascript? Can the portfolio content still be accessed properly?

My only point is this: it doesn't have to be a link.

No, it does not. However, it feels like a link. Even though it does not load a new page, it displays new content on the page. I also like the user feedback that hover offers. So even if I used something else, I would want some visual feedback on a mouseover.

Now: what happens if the user agent doesn't support javascript? Can the portfolio content still be accessed properly?

That is a million-dollar question. Some features may not be accessible. i have not figured out how this site will "gracefully degraded." But there has to be some minimum requirements.

I'd like to take a moment to announce something: my words have been arriving at their destinations sounding much harsher and brasher than I ever intend. I mean no offense; I say so only because a) someone else reacted poorly to a post of mine, and b) you seem to have as well.

Now.

I'd be curious to see what I could do with your page; delivering multiple pages' worth of content in one document is a good goal, and certainly not too lofty. I'll bet there's a way to do it using links for their actual purpose and give an intense scripted experience for those who can hack it while degrading gracefully for those who don't. At this point, I'm thinking CSS with overflow:auto and named anchors. Sounds like a neat project, in fact.

Good luck with it!

Absolutely no offense taken. Actually, I had been thinking about editing my previous post for similar reasons. I appreciate the dialog. Not only did I get the answer I NEEDED, but a bit of discussion.

Thanks very much.

Perhaps we need more Smilies :D :p ;) :) :cool: :thumbsup:

Use a link.

My only point is this: it doesn't have to be a link. It can be any element at all with an onclick listener. Don't limit yourself to what you've used the past few years; the latest stuff outdates all that and is ridiculously impressive. That's all.

Now: what happens if the user agent doesn't support javascript? Can the portfolio content still be accessed properly?


That's why you should use a link.

And you should use this css:


a:visited {
color: cornflowerblue;
}

a:hover {
color: papayawhip;
}

a:visited:hover {
color: lawngreen;
}



Won't quite work in Explorer on the mac, but that browser is no longer in development, so don't worry.

More: http://dhtmlkitchen.com/learn/css/multiclass/index3.jsp



v

My only point is this: it doesn't have to be a link. It can be any element at all with an onclick listener. Don't limit yourself to what you've used the past few years; the latest stuff outdates all that and is ridiculously impressive. That's all.

I tried using an element other than a link, and I am very happy with the results.

The links I was using were part of a list and had a typical amount of inline code, at least for me:

<ul>
<li><a href="javascript:;" onclick="setThumbLinkColor(this);P7_jumpScroller('galleryThumbsContent',10,0);return false;">link1</a></li>
<li><a href="javascript:;" onclick="setThumbLinkColor(this); P7_jumpScroller('galleryThumbsContent',-245,0);return false;">link2</a></li>
<li><a href="javascript:;" onclick="setThumbLinkColor(this); P7_jumpScroller('galleryThumbsContent',-755,0);return false;">link3</a></li>
</ul>


I removed the <a>s and any associated onclick's and now the html looks like this:

<ul>
<li id='10'>link1</li>
<li id='-245'>link2</li>
<li id='-755'>link3</li>
<li id='0'>link4</li>
<li id='0'>link5</li>
</ul>


(The ids are used as an arguement in each <li>s onclick handler. Might not be the best way, but still not bad.)

The onclick's and hover-like behaviour are set in a loop in a javascript function that gets called after the window is done loading. Makes for very clean html code, and more easliy maintained js.

Here's a preview, if anyone is interested (http://www.leap-nlizards.com/beta/)