nicht angemeldet
CSS-Klasse per Javascript definieren
Moin Moin !
Mein Problem: Eine Web-Anwendung, die nicht wirklich für CSS geschrieben wurde und mich nicht an den HEAD-Bereich des erzeugten HTML läßt. Trotzdem muß ich irgendwie diverse CSS-Klassen definieren. Funktionieren muß das mit IE ab 5.0 und Mozilla, NN4 bleibt erstmal außen vor.
So wie unten funktioniert es mit Opera 7 und Mozilla 1.6, der IE mag aber nicht.
var extrastyles='*.orga_togglebox{font-family:monospace;text-decoration:none;}';
var o=document.getElementsByTagName("head")[0];
var stylenode=document.createElement('style');
var styletype=document.createAttribute("type");
styletype.nodeValue="text/css";
stylenode.setAttributeNode(styletype);
var datanode=document.createTextNode(extrastyles);
stylenode.appendChild(datanode);
o.appendChild(stylenode);
Zweiter Ansatz für IE, keine Fehlermeldung, keine Funktion:
document.all.tags("head")[0].insertAdjacentHTML("AfterBegin",'<style type="text/css">'+extrastyles+'</style>');
Dritter Ansatz für IE:
var o=document.all.tags("head")[0];
o.innerHTML=o.innerHTML+'<style type="text/css">'+extrastyles+'</style>';
Fehlermeldung: "Could not set the innerHTML property. Invalid target element for this operation."
Hat noch jemand eine Idee? Vielleicht habe ich ja auch etwas übersehen. Sowas wie
document.style.classes['orga_togglebox'].fontFamily="monospace";
wäre ja zu schön, um wahr zu sein. ;-)
Alexander
--
Nein, ich beantworte keine Fragen per eMail. Dafür ist das Forum da.
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
Nein, ich beantworte keine Fragen per eMail. Dafür ist das Forum da.
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
-
Hi Alexander,
Mein Problem: Eine Web-Anwendung, die nicht wirklich für CSS geschrieben wurde und mich nicht an den HEAD-Bereich des erzeugten HTML läßt. Trotzdem muß ich irgendwie diverse CSS-Klassen definieren.
Der IE gestattet auch CSS-Definitionen im <body></body>.
-
Hallo,
Hat noch jemand eine Idee? Vielleicht habe ich ja auch etwas übersehen. Sowas wie
document.style.classes['orga_togglebox'].fontFamily="monospace";
wäre ja zu schön, um wahr zu sein. ;-)
Ich habe das mal mit document.styleSheets, addRule() [IE] bzw. insertRule() [Mozilla] probiert. Vielleicht hilft dieser Testcase weiter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 02/04</title>
<style type="text/css">
<!--/*
Dummy-Stylesheet, um document.styleSheets ansprechen zu koennen
oder alternativ mittels document.createStyleSheet() erzeugen ...
*/-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function CreateCSSClass(cname,cstyle)
{
var styleobj,last;if(document.styleSheets)styleobj=document.styleSheets;
if(styleobj)
{
last=styleobj.length-1;
// fuer IE:
if(styleobj.item(last).addRule)styleobj.item(last).addRule("."+cname,cstyle);
// fuer Mozilla & Co.:
else if(styleobj.item(last).insertRule)styleobj.item(last).insertRule("."+cname+" {"+cstyle+"}",last);// neue Klasse dynamisch zuweisen:
document.getElementById("bla").className="test";
}
}
//-->
</script>
</head>
<body>
<p id="bla">Klasse test wird per className zugewiesen</p>
<p class="test">Klasse test bereits als Attributwert zugewiesen</p>
<form action="">
<input type="button" value="Neue Klasse" onclick="CreateCSSClass('test','color:#00C;background-color:#FFC;font-family:monospace;text-decoration:none;')">
</form>
</body>
</html>MfG, Thomas
-
[Nachtrag:]
// neue Klasse dynamisch zuweisen:
document.getElementById("bla").className="test";Das kann dann natuerlich auch so lauten:
document.getElementById("bla").className=cname;MfG, Thomas
-