✔ Mit DOM (Document Object Model) auf Pseudoelemente zugreifen

[Dj Mike]

Hallo,

ich habe folgendes Problem. Ich möchte mit Javascript dynamisch das aussehen von bestimmten HTML-Elementen ändern. Das ist soweit kein problem, jetzt weiß ich allerdings nicht, ob und wenn ja, wie man auf sogenannte Pseudoelemente zugreifen kann!
Gibt es da eine Möglichkeit?

Beispiel:

<a href="http://www.example.com">Example</a>
<input type="button" onClick="document.getElementsByTagName('a')[0].style.color = 'red'" value="Linkfarbe in rot ändern">

Jetzt ist die Frage ob es etwas in der art gibt:

<input type="button" onClick="document.getElementsByTagName('a')[0]:hover.style.color = 'red'" value="Linkfarbe in rot ändern">

 

[Gumbo]

Der :hover-Selektor ist kein Pseudo-Element sondern eine Pseudo-Klasse.

Zu deinem Anliegen: Du könntest etwa event:Selectors einsetzen.

 

[Dj Mike]

Also, wenn ich das richtig verstanden habe, braucht man für eventSelectors das Framework Prototype.
Gibt es denn auch eine Möglichkeit ohne Prototype?
Ich hab auch mal das Beispiel von dieser Seite bei mir ausprobiert und, obwohl Prototype mit in die Seite mit eingebunden war, bekam ich die Fehlermeldung, dass eventSelectors nicht definiert ist!?
Irgendeine Idee?
Vielen Dank!

 

[Dj Mike]

Es scheint ja keiner eine Lösung zu wissen....
Falls jemand eine Idee hat, ich suche immer noch nach einer Lösung. Vielleicht muss ich doch nochmal die event:Selectors von Prototype ausprobieren...

 

[Gumbo]

Du könntest auch Folgendes nutzen:

var elems = document.getElementsByTagName("input");
for(var i=0; i<elems.length; i++) {
	elems[i].onfocus = new Function("this.className += ' input-focused'");
	elems[i].onblur = new Function("var regex = new Regex('\s*\binput-focused\b\s*'); this.className.replace(regex, '')");
}

Ich hab’s allerdings noch nicht getestet.

 

[Dj Mike]

Hallo,

danke für Deine Idee. Es hat aber nicht funktioniert. Ich habe nun folgendes probiert:

var elems = document.getElementsByTagName("li");
for(var i=0; i<elems.length; i++){
	elems[i].onmouseover = elems[i].style.color = "red";
	elems[i].onmouseout = elems[i].style.color = "black";
}

Leider hat das nicht so ganz funktioniert. Es ging nur, wenn ich direkt im HTML Dokument bei den LI-Tags onMouseOver mit reingeschrieben hab:

<li onMouseOver="this.style.color = 'red'" onMouseOut="this.style.color='black'">Foo</li>

Woran könnte das liegen?

 

[Gumbo]

Also bei mir funktioniert Folgendes einwandfrei:

<style type="text/css">
input {
	border-color: #00f;
}
input.focused {
	border-color: #f60;
}
</style>

<script type="text/javascript"><!--
window.onload = function() {
	var elems = document.getElementsByTagName("input");
	for(var i=0; i<elems.length; i++) {
		elems[i].onfocus = new Function("this.className += ' focused'");
		elems[i].onblur = new Function("this.className = this.className.replace(/\s*focused\s*/, '')");
	}
}
//--></script>

<input type="text"><input type="text">

 

[Dj Mike]

Ja, danke. Bei mir funktioniert dieser Code auch!
Allerdings nicht für meine Vorstellungen. Was ich will:
Auf meiner Seite können die Besucher die Hintergrund und Textfarbe anpassen. Bei links sollen dann per CSS beim Überfahren mit der Maus die Hintergrund- und die Vordergrundfarbe tauschen. Da diese Farben (Hinter- und Vordergrund) ja dynamisch per Javascript deffiniert werden, müsste ich auch per javascript die Farben der Pseudoklassen hover) ändern.
Dazu habe ich folgendes Script geschrieben:

var cssRules = document.styleSheets[0].cssRules;
for(i=0; i<cssRules.length; i++){
    if(cssRules[i].selectorText == "a:hover"){
        cssRules[i].style.color = "#FFFFFF";
        cssRules[i].style.backgroundColor = "#000000";
    }
}

Für den Internet Explorer müsste man anstatt

cssRules

einfach nur

rules

schreiben!

Damit durchsuche ich das Stylesheet nach dem Selektor "a:hover" und passe die Farben an. Da das aber nicht in allen Browsern (gleich) funktioniert lasse ich es wohl lieber... :-(
@Gumbo: Dein Vorschlag funtioniert bei mir nicht, da ich ja nicht dynamisch die Klassen, sondern die Farben verändern will!
Aber trotzdem vielen Dank für deine Hilfe!