Accessing CSS pseudo-classes through javascript

This may be impossible, but I'm sure someone else must have at least tried this before.

Can CSS pseudo-classes (ie :before, :hover, etc) be accessed through the DOM?

By example, I want to do something like this:

document.getElementById('foo').before.content = 'sometext';

I know this doesn't work, does anyone know if it can be done, and if so, how?

cheers

 

Hi,

You use the DOM properties.

document.getElementById('foo').[url=http://developer.mozilla.org/en/docs/DOM:element.previousSibling]previousSibling[/url].data = 'sometext';

Code (markup):

A firm understanding of how the DOM is structured, including #text elements, is necessary. If you are using Firefox, open up the DOM Inspector (from the Tools menu) and have a browse - that will show you a lot of how it works.


Edit: I may have misinterpreted your question. In case you are looking to insert an element in the manner of a pseudo-element such as :before (note: not a pseudo-class; they are two different things), try something like this:

var foo = document.getElementById('foo');
var foo_before = document.[url=http://developer.mozilla.org/en/docs/DOM:document.createTextNode]createTextNode[/url]('sometext');
foo.parentElement.[url=http://developer.mozilla.org/en/docs/DOM:element.insertBefore]insertBefore[/url](foo_before, foo);

Code (markup):

Regards
- P