用js实现的DIV+CSS编辑器代码

<title>DIV+CSS编辑器</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> 
<meta content="all" name="robots"/> 
<meta content="DIV+CSS编辑器是一个在线编辑DIV+CSS的在线编辑工具" name="description"/> 
<meta content="DIV+CSS编辑器,在线编辑，DIV+CSS，DIV+CSS工具，在线工具" name="keywords"/> 
<style media="screen" type="text/css"> 
 
</style> 
<script language="javascript" type="text/javascript"> 
 
</script> 
<script> 
var sInitColor = null; 
function callColorDlg(obj){ 
if (sInitColor == null)  
    var sColor = dlgHelper.ChooseColorDlg(); 
else 
    var sColor = dlgHelper.ChooseColorDlg(sInitColor); 
        sColor = sColor.toString(16);     
if (sColor.length < 6) { 
  var sTempString = "000000".substring(0,6-sColor.length); 
  sColor = sTempString.concat(sColor); 
} 
if(sColor!="000000"){ 
sColor = "#" + sColor; 
obj.value=sColor; 
obj.style.backgroundColor=sColor; 
}} 
</script><object classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" height="0px" id="dlgHelper" width="0px"></object> 
 
<p align="center"> 
<font style="color:#FF0000; font-size:14px; font-weight:bolder"> 
在线DIV+CSS编辑器 
</font> 
</p> 
<div class="MainBody" id="MainBody"> 
<div class="MainDialogCSS" onkeyup="setSelectionWithCss(2);" onmouseout="hoverInput(event.srcElement,2);" onmouseover="hoverInput(event.srcElement,1);"> 
<div class="vcssDetail" id="vcssDetail_div" style="display:block;"><p> 
类/标签/ID：<input class="normal_input" id="vcssIdentName" name="vcssIdentName" onmouseout="event.cancelBubble=true;this.className='normal_input';" onmouseover="select();" value=".style1"/> 
所有数值都不用输入单位;
 
宽：<input class="normal_input" id="vcssWidth" name="vcssWidth" size="8" type="text" value=""/> 
高：<input class="normal_input" id="vcssHeight" name="vcssHeight" size="8" type="text" value=""/> 
背景色：<input class="normal_input" id="vcssBackgroundColor" name="vcssBackgroundColor" onclick="callColorDlg(this)" onmouseout="event.cancelBubble=true;this.className='normal_input';" size="8" type="text" value=""/> 
前景色：<input class="normal_input" id="vcssColor" name="vcssColor" onclick="callColorDlg(this)" onmouseout="event.cancelBubble=true;this.className='normal_input';" size="8" type="text" value=""/>
 
边框：<input class="normal_input" id="vcssBorderWidth" name="vcssBorderWidth" onclick="value=1;vcssBorderdStyle.value='solid';" size="8" type="text" value=""/> 
颜色：<input class="normal_input" id="vcssBorderColor" name="vcssBorderColor" onclick="callColorDlg(this)" onmouseout="event.cancelBubble=true;this.className='normal_input';" size="8" type="text" value=""/> 
<select id="vcssBorderdStyle" name="vcssBorderdStyle" onclick="if(value=='')value='solid';"> 
    <option selected="">选择</option><option value="solid">solid</option><option value="dotted">dotted</option><option value="none">none</option><option value="hidden">hidden</option><option value="dashed">dashed</option><option value="double">double</option><option value="groove">groove</option><option value="ridge">ridge</option><option value="inset">inset</option><option value="outset">outset</option></select>
  
外间距 Margin ：<input class="normal_input" id="vcssMargin" name="vcssMargin" onkeydown="if(event.keyCode==32)this.value+='px';" size="20" type="text" value=""/>  
如:10px 2px 
  
内间距 Padding：<input class="normal_input" id="vcssPadding" name="vcssPadding" onblur="if(this.value!='' && !isNaN(this.value.substring(this.value.length-1)))this.value+='px';" onkeydown="if(event.keyCode==32)this.value+='px';" size="20" type="text" value=""/> 
如:10px 2px
 
浮动： 左<input name="vcssFloat" onclick="if(this.checked)vcssFloatResult.value=this.value" type="radio" value="left"/>  
右<input name="vcssFloat" onclick="if(this.checked)vcssFloatResult.value=this.value" type="radio" value="right"/><input class="hiddenObj" id="unsetFloat" name="vcssFloat" onclick="if(this.checked)vcssFloatResult.value='';" type="radio"/> 
<a href="#" onclick="unsetFloat.click();" style="cursor:pointer;" title="取消浮动属性">×</a> 
<input name="vcssFloatResult" type="hidden"/> 
显示：<select id="vcssDisplay" name="vcssDisplay"> 
  <option selected="">选择 
  </option><option value="block">block 
  </option><option value="inline">inline 
  </option><option value="none">none 
</option></select> 
可见：<input name="vcssVisibility" onclick="if(this.checked)vcssVisibilityResult.value=this.value" type="radio" value="visible"/>可见 
<input name="vcssVisibility" onclick="if(this.checked)vcssVisibilityResult.value=this.value" type="radio" value="hidden"/>隐藏 
<input class="hiddenObj" id="unsetVisibility" name="vcssVisibility" onclick="if(this.checked)vcssVisibilityResult.value='';" type="radio"/><a href="#" onclick="unsetVisibility.click();" style="cursor:pointer;" title="取消可见属性">×</a> 
<input name="vcssVisibilityResult" type="hidden"/>

文本对齐：<select id="vcssTextAlign" name="vcssTextAlign" onclick="if(value=='')value='center';"> 
  <option selected="">选择</option> 
  <option value="left">left</option> 
  <option value="center">center</option> 
  <option value="right">right</option> 
</select>  
行高：<input class="normal_input" id="vcssLineHeight" name="vcssLineHeight" onmouseout="event.cancelBubble=true;this.className='normal_input';" size="8" type="text" value=""/> 
<select id="select5" name="vcssLineUnit"> 
  <option value="%">%</option> 
  <option selected="">无</option> 
  <option value="px">px</option> 
</select> 
文字缩进：<input class="normal_input" id="vcssLineHeight4" name="vcssTextIndent" size="8" type="text" value=""/>

文本：<input class="normal_input" id="vcssFontSize" name="vcssFontSize" size="5" type="text" value="12px"/> 
字体： 
<select id="vcssFontFamily" name="vcssFontFamily" onclick="if(value=='')value='Arial';"><option selected="">选择</option><option value="宋体">宋体</option><option value="黑体">黑体</option><option value="Arial">Arial</option><option value="微软雅黑">雅黑</option></select> 
粗细：<input class="normal_input" id="vcssLineHeight3" name="vcssFontWeight" onmouseout="event.cancelBubble=true;this.className='normal_input';" size="8" type="text" value=""/> 
效果：<input name="vcssTextDecoration" onclick="if(this.checked)vcssDecorationResult.value=this.value" type="radio" value="underline"/>下划线 
<input name="vcssTextDecoration" onclick="if(this.checked)vcssDecorationResult.value=this.value" type="radio" value="none"/>无 
<input class="hiddenObj" id="unsetDecoration" name="vcssVisibility" onclick="if(this.checked)vcssDecorationResult.value='';" type="radio"/><a href="#" onclick="unsetDecoration.click();" style="cursor:pointer;" title="取消文字效果属性">×</a> 
<input name="vcssDecorationResult" type="hidden"/>

背景图片：<input class="normal_input" id="vcssBackgroundImage" name="vcssBackgroundImage" type="file"/> 
重复：<select id="vcssBackgroundRepeat" name="vcssBackgroundRepeat" onclick="if(value=='')value='no-repeat';"><option selected="">选择</option><option value="repeat-x">横向重复</option><option value="repeat-y">纵向重复</option><option value="no-repeat">不重复</option></select>

水平位置：<input class="normal_input" id="vcssBackgroundPositionX" name="vcssBackgroundPositionX" size="5" type="text" value=""/> 
垂直位置：<input class="normal_input" id="vcssBackgroundPositionY" name="vcssBackgroundPositionY" size="5" type="text" value=""/> 
附件：<select id="vcssBackgroundAttachment" name="vcssBackgroundAttachment" onclick="if(value=='')value='fixed';"><option selected="">选择</option><option value="fixed">固定</option><option value="scroll">滚动</option></select>

垂直对齐：<select id="vcssVerticalAlign" name="vcssVerticalAlign" onclick="if(value=='')value='middle';"> 
  <option selected="">选择</option> 
  <option value="middle">middle</option> 
  <option value="bottom">bottom</option>  
  <option value="auto">top</option> 
  <option value="auto">auto</option> 
  <option value="baseline">baseline</option> 
</select> 
清除：<select id="vcssClear" name="vcssClear" onclick="if(value=='')value='both';"> 
  <option selected="">选择</option> 
  <option value="left">left</option> 
  <option value="right">right</option>  
  <option value="both">both</option> 
</select> 
Overflow：<select id="vcssOverflow" name="vcssOverflow" onclick="if(value=='')value='hidden';"> 
  <option selected="">选择</option> 
  <option value="scroll">scroll</option> 
  <option value="auto">auto</option>  
  <option value="hidden">hidden</option> 
</select>

定位：<select id="vcssPosition" name="vcssPosition"> 
  <option selected="">选择</option> 
  <option value="absolute">绝对</option> 
  <option value="relative">相对</option>  
</select> 
Z坐标：<input class="normal_input" id="vcssZIndex" name="vcssZIndex" onmouseout="event.cancelBubble=true;this.className='normal_input';" size="5" value=""/> 
left:<input class="normal_input" id="vcssLeft" name="vcssLeft" size="4" value=""/> 
top:<input class="normal_input" id="vcssTop" name="vcssTop" size="4"/> 
right:<input class="normal_input" id="vcssRight" name="vcssRight" size="4"/> 
bottom:<input class="normal_input" id="vcssBottom" name="vcssBottom" size="4"/>

UL列表：类型<select id="vcssListStyleType" name="vcssListStyleType" onclick="if(value=='')value='none';"> 
  <option selected="">选择</option> 
  <option value="none">none</option> 
  <option value="disc">disc</option> 
  <option value="circle">circle</option> 
  <option value="square">square</option> 
  <option value="decimal">decimal</option> 
</select> 
图像：<input id="vcssListStyleImageBtn" name="vcssListStyleImageBtn" onclick="vcssListStyleImage.click();" type="button" value="..."/> 
<input id="vcssListStyleImage" name="vcssListStyleImage" style="display:none;" type="file" value=""/> 
位置：<input name="vcssListStylePosition" onclick="if(this.checked)vcssPositionResult.value=this.value" type="radio" value="inside"/>内 
<input name="vcssListStylePosition" onclick="if(this.checked)vcssPositionResult.value=this.value" type="radio" value="outside"/>外 
<input class="hiddenObj" id="unsetPosition" name="vcssVisibility" onclick="if(this.checked)vcssPositionResult.value='';" type="radio"/><a href="#" onclick="unsetPosition.click();" style="cursor:pointer;" title="取消列表效果属性">×</a> 
<input name="vcssPositionResult" type="hidden"/> 
 光标： 
<select id="vcssCursor" name="vcssCursor" onclick="if(value=='')value='pointer';"> 
  <option selected="">选择</option> 
  <option value="default">默认</option> 
  <option value="pointer">手</option> 
  <option value="text">文本</option> 
  <option value="move">移动</option> 
  <option value="crosshair">crosshair</option> 
<option value="default">default</option> 
<option value="pointer">pointer</option> 
<option value="hand">hand</option> 
<option value="move">move</option> 
<option value="help">help</option> 
<option value="wait">wait</option> 
<option value="text">text</option> 
<option value="w-resize">w-resize</option> 
<option value="s-resize">s-resize</option> 
<option value="n-resize">n-resize</option> 
<option value="e-resize">e-resize</option> 
</select>

<input id="vcssOk" name="vcssOk" onclick="setSelectionWithCss(1);" type="button" value="确定"/> 
<input id="vcssCancel" name="vcssCancel" type="button" value="取消"/> 
<input id="vcssView" name="vcssView" onclick="setSelectionWithCss(2);" type="button" value="应用"/> 
 <input id="vcssImport" name="vcssImport" type="button" value="@import.."/> 
 <input id="vcssSave" name="vcssSave" type="button" value="保存.."/> 
 <input id="vcssLoad" name="vcssLoad" type="button" value="载入.."/> 
 
</p><fieldset style="padding:10px; "><legend>实际应用效果如下</legend><div class="vcsseffect" id="vcsseffect_div"> 
Effect of This Rule Shows You at here!

工具啦 （www.tool.la） 给你最全、最好的工具！</div> 
</fieldset>
</div></div>

<hr/> 
<textarea cols="100" id="cssTextValue" name="cssTextValue" rows="5"> 
<input id="vcssView" name="vcssView" onclick="window.clipboardData.setData('text',document.all.cssTextValue.value);alert('CSS已保存到剪贴板');" type="button" value="复制到剪切板"/> 
<textarea cols="100" id="cssTextValueCompare" name="cssTextValueCompare" rows="5"> 
<input id="vcssView" name="vcssView2" onclick="window.clipboardData.setData('text',document.all.cssTextValueCompare.value);alert('CSS已保存到剪贴板');" type="button" value="复制到剪切板"/> 
<hr/> 
<div class="vv" contenteditable="true" id="vv" style="width:300px;height:50px;background-color:#ff80c0;color:#800040;border-width:1px;border-color:#ff0080;border-style:solid;margin:6px;padding:6px;float:left;font-Size:12px;"> 
这是一个使用了复杂的样式的DIV，你可以使用获取CSS来获取这个CSS 
</div><input id="vcssView" onclick="getSelectionWithCss();setSelectionWithCss()" type="button" value="获取左侧DIV样式"/> 
<div style="width:100% "> </div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]