How to set link visited color in JQuery

Question

How do I set the visited color of an "a" tag. here is the code I have

theobj.find('a:visited').css('color', thejson.WidgetInfo.TextColor);

The above code is not working. I can only use inline css. Is there a way to do this?

Answer 1

You could construct a style tag, and then write it to the page.

var visited_link_styling = "<style> a:visited{ color:'red'; } </style>";
$('head').append( visited_link_styling );

This might get a little frustrating because JavaScript isn't good at multiline strings.

Answer 2

I would suggest you to have a css class and set that class instead but since you can only use inline style you can try this

theobj.find('a').attr("style", "color:#000000 !important");

Answer 3

There isn't a visited selector in jQuery that I am aware, but a similar question points to a plugin to handle this Remy Sharp Visited Plugin

Answer 4

Is there a reason you are wanting to use jQuery and not pure CSS? Should visited links behave differently than unvisited links?

Depending on your answers to the above questions, the solutions will vary.

CSS:

a:hover { color: #000; }

jQuery (for multiple link color attributes):

var ele = $("#widget a"); // Replace the desired element/object here
var eleColor = ele.css('color'); // Grab what the element's color is
if(eleColor != '#000000' || eleColor != '#000'){ // If it doesn't match X or Y
ele.css("color","000"); // Set to default color
}

^Substituting desired colors above.

Or approach 2:

$("#widget a").css("color","000"); // Set all links to #000

Or approach 3:

$("#widget a").click(function(){ $(this).css("color","000"); });

Working example: http://jsfiddle.net/9N5Xe/

Answer 5

You can't actually set any properties on an element that only apply to some pseudoselector like visited. CSS documents are declarative, in that you include the CSS in your document and then the set of rules becomes available. JavaScript is not declarative, but executed, which means you can only catch some event and then respond to that. In other words; you can select all the links that are visited and set the color for each, but you can't set the color for visited links.

Now, in order to achieve what you want, you can set a 'live' event handler for the click event on each anchor and then apply the CSS accordingly.

Out of curiosity; why don't you just set the rule in a style element or in a css document?