Using Javascript to change CSS pseudo-classes

[hardunderground]

Hello,

I am trying to use javascript to replace colors in css classes with hex values from a color selector (jscolor). It's working for basic classes and ids, but the stylesheet I need to work with contains contextual CSS and pseudo-classes and I can't figure out how to reference them. (The stylesheet I'm working with is pre-defined and I can't change it.)

The jscolor input field:

    <input class="color"
	onchange="updateText(this.color.toString())" />

The function:

function updateText(color) {
	document.getElementsByClass('myClassName')[0].style.color = '#'+color
}

Like I said, this works fine with simple classes. But I don't know how to get Javascript to replace the colors with the CSS I have to work with:

.ymp-color-text-main:link
{
	color:#0075b9;
}


#ymp-tray ul li a.playing {
     background-color:#d4d4d4;
     color: #0075b9;
}


#ymp-tray ul li a:hover,
#ymp-tray ul li a.ymp-tray-track-focus {
     background-color:#555555;
     color:#FFFFFF;
}

How do I reference these? I don't know Javascript that well, I'm just a prototyper -- and I'm stumped!

[A1ien51]

only way to alter the pseudo is to change/add the rules in the style sheet

IE:

document.styleSheets[0].addRule('a:hover', 'color: green', 0);

other:

document.styleSheets[0].insertRule('a:hover { color: green; }', 0);

Eric

[mrhoo]

Alien is right, the way to do this is to write a new rule.
But I would add it to the end of the last style sheet,
not the beginning of the first.

You can add some pseudo attributes in some browsers, but that isn't good enough for actual code.