nicht angemeldet
CSS - Styles auslesen
Hallöchen,
ich habe ein Problem mit CSS und JS:
Folgende Styles sind in einer externen .css - Datei definiert:
a.mainmenu { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #FFFFFF; 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; }
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?
Vielleicht bin ich auch einfach nur zu blöd das selber zu finden, aber ich sehe bisher einfach keine Lösung... :(
-
Hi,
es gibt glaub ich ein objekt:
document.stylesheets[] dass die <style> element anspricht. versuchs mal damit.
sonst bietet der IE noch objekte wie currentstyle und runtimestyle, die auch auf die style eigenschaften zugreifen, aber eben nicht auf die die InLine im Element (<a href="" style="">) definiert wurden, sondern auf externe. Ich kenn mich aber wenig damit aus. musste also mal selber weitersuchen.
Christian
-
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
-
Volltreffer, das ist genau das, was ich gesucht habe :)
Vielen Dank!
-