nicht angemeldet
Hallo,
Wie kann ich nun aus meinem JavaScript heraus den Wert "color" von a.mainmenu und a.mainmenu:hover auslesen, damit ich das Script ohne es umzuschreiben auch einsetzen kann, wenn ich für eine andere Seite ein anderes CSS verwende?
Ueber die document.styleSheet-Collection kann man das unter IE und Mozilla so realisieren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 05/03</title>
<link rel="stylesheet" href="extern.css" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
function changeSelectorProperty(sel,prop,val)
{
var rules,docstyle=document.styleSheets.item(0);
if(docstyle.rules)rules=docstyle.rules; // IE
if(docstyle.cssRules)rules=docstyle.cssRules; // Mozilla
var rl=rules.length;
for(var i=0;i<rl;i++)
{
if(rules.item(i).selectorText.toLowerCase()==sel.toLowerCase())rules.item(i).style[prop]=val;
}
}
//-->
</script>
</head>
<body>
<a class="mainmenu" href="test.htm">Testlink</a>
<br><br>
<a href="javascript:changeSelectorProperty('a.mainmenu','color','#0000CC');changeSelectorProperty('a.mainmenu:hover','color','#000000')">Test</a>
</body>
</html>
In extern.css steht:
a.mainmenu { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #009900; text-decoration: none; font-style:italic; }
a.mainmenu:hover { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #FF0000; text-decoration: none; font-style:italic; font-weight:bold; }
Ich habe nur die Ausgangslinkfarbe von #FFFFFF auf #009900 veraendert. Der Testlink ist anfangs gruen und wird beim Hover rot. Nach dem Anklicken von "Test" ist der Link blau und wird beim Hover schwarz.
Die Funktion changeSelectorProperty(sel,prop,val) uebernimmt -- wie zu sehen -- einen Selectornamen (sel), die zu aendernde Eigenschaft (prop) und den neuen Wert (val).
Wenn ein vorhandener Wert ausgelesen werden soll, also hier die Farbe, dann einfach abfragen nach: rules.item(i).style[prop].
MfG, Thomas