dieses Script habe ich irgendwo im Netz gefunden und ist auch ganz hilfreich, um die Verbindung von JS mit CSS zu verstehen.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 4.5">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="02/20/2006">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>
<style>
#header {color:#ffffff; font: italic bold 20pt, arial}
#wtext {color:#ffffff; font: bold 10pt, arial; text-decoration: underline}
#inp01 {border: 0px solid; background-color: #CCCCFF; font: 10pt, arial}
#inp02 {border: 2px solid; background-color: #CCCCFF; font: 10pt, arial; border-style:inset}
#white {color:#ffffff; font: 10pt, arial}
</style>
<script>
function stil()
{if (schriftstil.options[schriftstil.selectedIndex].value=='normal')
{document.all.beispieltext.style.fontWeight=''
document.all.beispieltext.style.fontStyle=''
document.all.beispieltext.style.fontStyle='normal'}
if (schriftstil.options[schriftstil.selectedIndex].value=='italic')
{document.all.beispieltext.style.fontWeight=''
document.all.beispieltext.style.fontStyle=''
document.all.beispieltext.style.fontStyle='italic'}
if (schriftstil.options[schriftstil.selectedIndex].value=='bold')
{document.all.beispieltext.style.fontWeight=''
document.all.beispieltext.style.fontStyle=''
document.all.beispieltext.style.fontWeight='bold'}
if (schriftstil.options[schriftstil.selectedIndex].value=='bold-italic')
{document.all.beispieltext.style.fontWeight=''
document.all.beispieltext.style.fontStyle=''
document.all.beispieltext.style.fontWeight='bold'
document.all.beispieltext.style.fontStyle='italic'}}
function quelltext()
{Textart=document.all.beispieltext.style.fontFamily
Schriftstil=''
if (document.all.beispieltext.style.fontStyle!='')
Schriftstil=document.all.beispieltext.style.fontStyle
if (document.all.beispieltext.style.fontWeight!='')
Schriftstil=document.all.beispieltext.style.fontWeight
if (document.all.beispieltext.style.fontWeight=='bold' && document.all.beispieltext.style.fontStyle=='italic')
Schriftstil=document.all.beispieltext.style.fontWeight+' '+document.all.beispieltext.style.fontStyle
Textgröße=document.all.beispieltext.style.fontSize
Zeichenabstand=document.all.beispieltext.style.letterSpacing
Textdekoration=document.all.beispieltext.style.textDecoration
Textfarbe=document.all.beispieltext.style.color
Hintergrundfarbe=document.all.beispieltext.style.backgroundColor
Rahmen=document.all.beispieltext.style.border
Mauszeiger=document.all.beispieltext.style.cursor
quelltext=open("","text","scrollbars=no");
quelltext.resizeTo(800,200);
quelltext.moveTo(0,0);
quelltext.focus();
quelltext.document.open()
quelltext.document.write('<body bgcolor=f0f0f0 onUnload=opener.location.reload()>')
quelltext.document.write('<title>--> CSS-Generator 1.0 <-- [quelltext]</title>')
quelltext.document.write('<span style="font: 10 pt verdana; color:red"><code><style><br>')
quelltext.document.write('#css_text {font: '+Schriftstil+' '+Textgröße+' , '+Textart+'; letter-spacing: '+Zeichenabstand+'; text-decoration: '+Textdekoration+';<br>')
quelltext.document.write(' color: '+Textfarbe+'; background-color: '+Hintergrundfarbe+'; border: '+Rahmen+'; cursor: '+Mauszeiger+'}<br>')
quelltext.document.write('</style><br><br>')
quelltext.document.write('<span id=css_text>dies hier ist ein beispieltext</span></code><br><br>')
quelltext.document.write('<span style="font: 08pt; color:black">markieren sie den text, klicken sie rechts auf-><i>kopieren/copy</i><br>')
quelltext.document.write('klicken sie in ihrem editor-programm rechts auf -><i>einfügen/paste</i>')
quelltext.document.write('<div align=right style="position:absolute; left: 705; top:147"><input type=button value=schließen onclick=self.close()></div>')
quelltext.document.close()}
</script>
<script>
function noerror()
{return true}
window.onerror=noerror
</script>
</head>
<body>
<center>
<table width=500 border=0 cellpadding=0 cellspacing=0 style="border: 2px solid; border-color: #0066ff">
<tr>
<td bgcolor=#0066FF colspan=3 align=center><span id=header>--> CSS-Generator 1.0 <--</span></td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Texttart</b></td>
<td bgcolor=#000066 id=white><select name=schriftart size=1 id=inp01 onchange="document.all.beispieltext.style.fontFamily=schriftart.options[schriftart.selectedIndex].value; schriftstil.focus()">
<option value="arial"> Arial
<option value="comic sans ms"> Comic Sans MS
<option value="impact"> Impact
<option value="helvetica"> Helvetica
<option value="tahoma"> Tahoma
<option value="times new roman"> Times New Roman
<option value="verdana"> Verdana
</select></td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Textstil</b></td>
<td bgcolor=#000066 id=white><select name=schriftstil size=1 id=inp01 onchange="stil();schriftsize.focus(); schriftsize.select()">
<option value="normal"> normal
<option value="italic"> kursiv
<option value="bold"> fett
<option value="bold-italic"> fett-kursiv
</select></td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Textgröße</b></td>
<td bgcolor=#000066 id=white><input type=text name=schriftsize size=3 id=inp02 maxlength=3 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.fontSize=schriftsize.value; zeichenabstand.focus(); zeichenabstand.select()}"></td>
<tr>
<td bgcolor=#000066 id=white><b>Zeichenabstand</b></td>
<td bgcolor=#000066 id=white><input type=text name=zeichenabstand size=3 id=inp02 maxlength=3 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.letterSpacing=zeichenabstand.value; textdekoration.focus()}"></td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Textdekoration</b></td>
<td bgcolor=#000066 id=white><select name=textdekoration size=1 id=inp01 onchange="document.all.beispieltext.style.textDecoration=textdekoration.options[textdekoration.selectedIndex].value; textfarbe_r.focus(); textfarbe_r.select()">
<option value="none"> normal
<option value="underline"> unterstrichen
<option value="overline"> überstrichen
<option value="line-through"> durchgestrichen
<option value="underline overline"> unterstrichen-überstrichen
<option value="underline line-through"> unterstrichen-durchgestrichen
<option value="line-through overline"> überstrichen-durchgestrichen
<option value="line-through underline overline"> unterstrichen-überstrichen-durchgestrichen
</select></td>
</tr>
<tr>
<td bgcolor=#000066 id=white valign=top><b>Texttfarbe</b></td>
<td bgcolor=#000066 id=white><input type=text name=textfarbe_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {textfarbe_g.focus(); textfarbe_g.select()}">
<input type=text name=textfarbe_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {textfarbe_b.focus(); textfarbe_b.select()}">
<input type=text name=textfarbe_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.color=textfarbe_r.value+textfarbe_g.value+textfarbe_b.value; bg_r.focus(); bg_r.select()}"><br>
rot grün blau (z.B. 00 66 FF)</td>
</tr>
<tr>
<td bgcolor=#000066 id=white valign=top><b>Hintergrundfarbe</b></td>
<td bgcolor=#000066 id=white><input type=text name=bg_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {bg_g.focus(); bg_g.select()}">
<input type=text name=bg_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {bg_b.focus(); bg_b.select()}">
<input type=text name=bg_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.backgroundColor=bg_r.value+bg_g.value+bg_b.value; rahmentyp.focus()}"><br>
rot grün blau (z.B. 00 66 FF)</td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Rahmentyp</b></td>
<td bgcolor=#000066 id=white><select name=rahmentyp size=1 id=inp01 onchange="document.all.beispieltext.style.borderStyle=rahmentyp.options[rahmentyp.selectedIndex].value; rahmenwidth.focus(); rahmenwidth.select()">
<option value="none"> kein rand
<option value="dotted"> gepunktet
<option value="dashed"> gestrichelt
<option value="solid"> durchgezogen
<option value="double"> doppelt
<option value="groove"> Draufklebe-Effekt
<option value="ridge"> Bilderrahmen-Effekt
<option value="inset"> 3D nach innen
<option value="outset"> 3D nach außen
</select></td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Rahmenstärke</b></td>
<td bgcolor=#000066 id=white><input type=text name=rahmenwidth size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.borderWidth=rahmenwidth.value; b_r.focus(); b_r.select()}"></td>
</tr>
<tr>
<td bgcolor=#000066 id=white valign=top><b>Rahmenfarbe</b></td>
<td bgcolor=#000066 id=white><input type=text name=b_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {b_g.focus(); b_g.select()}">
<input type=text name=b_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {b_b.focus(); b_b.select()}">
<input type=text name=b_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.backgroundColor=b_r.value+b_g.value+b_b.value; cursor.focus()}"><br>
rot grün blau (z.B. 00 66 FF)</td>
</tr>
<tr>
<td bgcolor=#000066 id=white><b>Mauszeiger</b></td>
<td bgcolor=#000066 id=white><select name=cursor size=1 id=inp01 onchange="document.all.beispieltext.style.cursor=cursor.options[cursor.selectedIndex].value; document.all.beispieltext.focus()">
<option value="default"> normal
<option value="hand"> Hand
<option value="crosshair"> Präzision
<option value="text"> Textfeld
<option value="wait"> Sanduhr
<option value="help"> Hilfe
<option value="move"> Verschiebungs-Kreuz
<option value="n-resize"> Verschiebungspfeil (nach oben)
<option value="ne-resize"> Verschiebungspfeil (nach oben rechts)
<option value="e-resize"> Verschiebungspfeil (nach rechts)
<option value="se-resize"> Verschiebungspfeil (nach unten rechts)
<option value="s-resize"> Verschiebungspfeil (nach unten)
<option value="w-resize"> Verschiebungspfeil (nach links)
<option value="nw-resize"> Verschiebungspfeil (nach link oben)
</select></td>
</tr>
<tr>
<td colspan=2 style="border-top: 2px solid; border-color: #0060ff"> </td>
</tr>
<tr>
<td colspan=2 align=center><span id=beispieltext style="font: 10pt; decoration: none; border:; border-color:; height=20%; margin:10; margin-top:0">dies hier ist ein beispieltext</span>
<span id=wtext style="background-color:#0066ff; font: 10pt, arial; width=500"><b style="cursor:hand" onclick=quelltext() tabindex=0>quellcode erstellen</b></span></td>
</tr>
</table>
</body>
</html>
