Topic awaiting preservation: Accessing CSS pseudo-classes through the DOM

Is this actually possible? In CSS you can use the :before pseudo-class to prepend your own bullets to an unordered list, but if, say, onClick() I wanted to change that icon, can I do that through the DOM?


Justice 4 Pat Richard

I'm rusty from staying out of the web development business for half a year, so my memory might fail me. But as I recall, there is no definite way. You can't do it on a per-element basis (Syntax of CSS rules in HTML's "style" attribute that purposed to change this never got past WD stage), you need to add to - or change - the stylesheets for the document.

So, first of all you need to find out a selector for the element in question. Then you need to either create a new style element and attach the rule as text, and then attach that to the document; or play around with [DOM2Style] and the iew equivalents. But trying the latter you'll soon find yourself in a tangle of different levels of support and quirkiness, so I would say the former is the better option.

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

I looked at that a couple of months ago, and didn't find anyway to do it with Javascript. What I ended up doing was using Javascript to change the class of the 'li' instead, which in the end has the same effect even though it might not be as nice

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -

Skaarj: Actually the easiest way is to, as Veneficuz said, to play with the className of the LI. But, if you *really* want to touch the :before pseudo-element, you can append/overwrite your own CSS rules using the Stylesheets object.

Hope that helps,

Just in case, here is a tutorial to edit the Stylesheets in JavaScript