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


答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>DIV+CSS编辑器</title> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<meta content="all" name="robots" /> 
<meta name="description" content="DIV+CSS编辑器是一个在线编辑DIV+CSS的在线编辑工具" /> 
<meta content="DIV+CSS编辑器,在线编辑，DIV+CSS，DIV+CSS工具，在线工具" name="keywords" /> 
<style type="text/css" media="screen"> 
<!-- 
html,body{height:100%;}*{font-size:12px;}.vcsseffect{background-color:#fff;background-image:url(grid.gif);}.hiddenObj{display:none;}.normal_input{border:1px solid #84a1bd;background-color:#fff;height:18px;}.hover_input {border:1px solid #9ecc00;background-color:#fff;height:18px;}.vcssDetail{padding: 15px;padding-top:0px;}.MainDialogCSS{ 
    width:550px; 
    margin-right: auto; 
    margin-left: auto; 
}.DetailCSSboxModel{ 
    height:100%; 
    margin-right: auto; 
    margin-left: auto; 
}.MainBody{ 
    height:400px; 
    width: 760px; 
    margin-left: auto; 
    margin-right: auto; 
} 
--> 
</style> 
<script language="javascript" type="text/javascript"> 
<!-- 
function hoverInput(obj,n) 
{ 
    if(n==1){if(obj.tagName=="INPUT" && obj.type=="text"){obj.className='hover_input';}} 
    else{ 
        if(obj.tagName=="INPUT" && obj.type=="text") 
        { 
        obj.className='normal_input'; 
        if(obj.value!='' && !isNaN(obj.value.substring(obj.value.length-1)))obj.value+='px'; 
        } 
    } 
    setSelectionWithCss(2); 
} 
var allCSSsetterCode = ""; 
function setSelectionWithCss(funnum) 
{ 
    isSetting(vcssWidth,"width"); 
    isSetting(vcssHeight,"height"); 
    isSetting(vcssBackgroundColor,"background-color"); 
    isSetting(vcssColor,"color"); 
    isSetting(vcssBorderWidth,"border-width"); 
    isSetting(vcssBorderColor,"border-color"); 
    isSetting(vcssBorderdStyle,"border-style"); 
    isSetting(vcssMargin,"margin"); 
    isSetting(vcssPadding,"padding"); 
    isSetting(vcssFloatResult,"float"); 
    isSetting(vcssDisplay,"display"); 
    isSetting(vcssVisibilityResult,"visibility"); 
    isSetting(vcssTextAlign,"text-align"); 
    isSetting(vcssLineHeight,"line-height"); 
    isSetting(vcssTextIndent,"text-indent"); 
    isSetting(vcssFontSize,"font-Size"); 
    isSetting(vcssFontFamily,"font-family"); 
    isSetting(vcssFontWeight,"font-weight"); 
    isSetting(vcssDecorationResult,"text-decoration"); 
    isSetting(vcssPosition,"position"); 
    isSetting(vcssZIndex,"z-index"); 
    isSetting(vcssLeft,"left"); 
    isSetting(vcssRight,"right"); 
    isSetting(vcssTop,"top"); 
    isSetting(vcssBottom,"bottom");     
    isSetting(vcssPositionResult,"list-style-position"); 
    isSetting(vcssCursor,"cursor"); 
    isSetting(vcssBackgroundRepeat,"background-repeat"); 
    isSetting(vcssBackgroundAttachment,"background-attachment"); 
    isSetting(vcssListStyleType,"list-style-type"); 
    isSetting(vcssOverflow,"overflow"); 
    isSetting(vcssClear,"clear"); 
    isSetting(vcssVerticalAlign,"vertical-align"); 
    if(vcssBackgroundImage.value!="")allCSSsetterCode+="background-image:url("+vcssBackgroundImage.value+");"; 
    if(vcssBackgroundPositionX.value!="" && vcssBackgroundPositionY.value!="")allCSSsetterCode+="background-position:"+vcssBackgroundPositionX.value+" "+vcssBackgroundPositionY.value+";"; 
    if(vcssListStyleImage.value!="")allCSSsetterCode+="list-style-image:url("+vcssListStyleImage.value+");"; 
    if(funnum==1) 
    { 
        alert(allCSSsetterCode); 
    } 
    else 
    { 
        var everyRule = allCSSsetterCode.split(';'); 
        var resultCSSTEXT=vcssIdentName.value+"\r\n{\t"; 
        for(var v=0;v<everyRule.length-1;v++) 
        { 
            resultCSSTEXT+=everyRule[v]+";\r\n\t"; 
        } 
        resultCSSTEXT+="\r\n}"; 
        document.all.cssTextValue.value=String(resultCSSTEXT); 
        document.all.cssTextValueCompare.value=String(allCSSsetterCode); 
        vcsseffect_div.style.cssText=String(allCSSsetterCode); 
    } 
    allCSSsetterCode=""; 
} 
var isFisrtGetCss = true; 
function getSelectionWithCss(funnum) 
{ 
    isGetting("vcssWidth","width"); 
    isGetting("vcssHeight","height"); 
    isGetting("vcssBackgroundColor","backgroundColor"); 
    isGetting("vcssColor","color"); 
    isGetting("vcssBorderWidth","borderWidth"); 
    isGetting("vcssBorderColor","borderColor"); 
    isGetting("vcssBorderdStyle","borderStyle"); 
    isGetting("vcssMargin","margin"); 
    isGetting("vcssPadding","padding"); 
    isGetting("vcssFloat","float"); 
    isGetting("vcssDisplay","display"); 
    isGetting("vcssVisibilityResult","visibility"); 
    isGetting("vcssTextAlign","textAlign"); 
    isGetting("vcssLineHeight","lineHeight"); 
    isGetting("vcssTextIndent","textIndent"); 
    isGetting("vcssFontSize","fontSize"); 
    isGetting("vcssFontFamily","fontFamily"); 
    isGetting("vcssFontWeight","fontWeight"); 
    isGetting("vcssDecorationResult","textDecoration"); 
    isGetting("vcssBackgroundImage","backgroundImage"); 
    isGetting("vcssBackgroundRepeat","backgroundRepeat"); 
    isGetting("vcssBackgroundAttachment","backgroundAttachment"); 
    isGetting("vcssListStyleType","listStyleType"); 
    isGetting("vcssListStyleImage","ListStyleImage"); 
    isGetting("vcssPositionResult","listStylePosition"); 
    isGetting("vcssCursor","cursor"); 
} 
function isSetting(cssobj,cssStartParam) 
{ 
    if(cssobj.value!="")allCSSsetterCode+=cssStartParam+":"+cssobj.value+";"; 
} 
function isGetting(cssobj,cssStartParam) 
{    if(isFisrtGetCss) 
    { 
        ele = document.getElementById("vv"); 
        if(eval("ele.style."+cssStartParam)!="") 
        { 
            document.all[cssobj].value=eval("ele.style."+cssStartParam); 
        } 
    } 
} 
//--> 
</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></head><OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT> 
<body> 
<p align="center"> 
<font style="color:#FF0000; font-size:14px; font-weight:bolder"> 
在线DIV+CSS编辑器 
</font> 
</p> 
<div class="MainBody" id="MainBody"> 
<div onMouseOver="hoverInput(event.srcElement,1);" onMouseOut="hoverInput(event.srcElement,2);" onKeyUp="setSelectionWithCss(2);" class="MainDialogCSS"> 
<div id="vcssDetail_div" class="vcssDetail" style="display:block;"><p> 
类/标签/ID：<input name="vcssIdentName" id="vcssIdentName" value=".style1" class="normal_input" onmouseover="select();" onMouseOut="event.cancelBubble=true;this.className='normal_input';" /> 
所有数值都不用输入单位;
 
宽：<input name="vcssWidth" type="text" class="normal_input" id="vcssWidth" value="" size="8" /> 
高：<input name="vcssHeight" type="text" class="normal_input" id="vcssHeight" value="" size="8" /> 
背景色：<input name="vcssBackgroundColor" type="text" class="normal_input" id="vcssBackgroundColor" onMouseOut="event.cancelBubble=true;this.className='normal_input';" value="" size="8" onClick="callColorDlg(this)" /> 
前景色：<input name="vcssColor" type="text"  class="normal_input" id="vcssColor" value="" size="8" onMouseOut="event.cancelBubble=true;this.className='normal_input';" onClick="callColorDlg(this)" />
 
边框：<input name="vcssBorderWidth" onclick="value=1;vcssBorderdStyle.value='solid';" type="text"  class="normal_input" id="vcssBorderWidth" value="" size="8" /> 
颜色：<input name="vcssBorderColor" type="text"  class="normal_input" id="vcssBorderColor" value="" size="8" onClick="callColorDlg(this)" onMouseOut="event.cancelBubble=true;this.className='normal_input';" /> 
<select name="vcssBorderdStyle" id="vcssBorderdStyle" onclick="if(value=='')value='solid';"> 
    <option selected>选择<option value="solid">solid<option value="dotted">dotted<option value="none">none<option value="hidden">hidden<option value="dashed">dashed<option value="double">double<option value="groove">groove<option value="ridge">ridge<option value="inset">inset<option value="outset">outset</select>
  
外间距 Margin ：<input name="vcssMargin" type="text" onKeyDown="if(event.keyCode==32)this.value+='px';" class="normal_input" id="vcssMargin" value="" size="20" />  
如:10px 2px 
  
内间距 Padding：<input name="vcssPadding" type="text" onKeyDown="if(event.keyCode==32)this.value+='px';" onBlur="if(this.value!='' && !isNaN(this.value.substring(this.value.length-1)))this.value+='px';" class="normal_input" id="vcssPadding" value="" size="20" /> 
如:10px 2px
 
浮动： 左<input type="radio" name="vcssFloat" onClick="if(this.checked)vcssFloatResult.value=this.value" value="left">  
右<input name="vcssFloat" type="radio" onClick="if(this.checked)vcssFloatResult.value=this.value" value="right"><input name="vcssFloat" type="radio" class="hiddenObj" id="unsetFloat" onClick="if(this.checked)vcssFloatResult.value='';" /> 
× 
<input name="vcssFloatResult" type="hidden" /> 
显示：<select name="vcssDisplay"  id="vcssDisplay"> 
  <option selected>选择 
  <option value="block">block 
  <option value="inline">inline 
  <option value="none">none 
</select> 
可见：<input type="radio" name="vcssVisibility" value="visible" onClick="if(this.checked)vcssVisibilityResult.value=this.value">可见 
<input type="radio" name="vcssVisibility" value="hidden" onClick="if(this.checked)vcssVisibilityResult.value=this.value">隐藏 
<input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetVisibility" onClick="if(this.checked)vcssVisibilityResult.value='';" />× 
<input name="vcssVisibilityResult" type="hidden" /> 

 
文本对齐：<select name="vcssTextAlign" id="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 name="vcssLineHeight" type="text" class="normal_input" id="vcssLineHeight" onMouseOut="event.cancelBubble=true;this.className='normal_input';" value="" size="8" /> 
<select name="vcssLineUnit" id="select5"> 
  <option value="%">%</option> 
  <option selected>无</option> 
  <option value="px">px</option> 
</select> 
文字缩进：<input name="vcssTextIndent" type="text" class="normal_input" id="vcssLineHeight4" value="" size="8" /> 

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

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

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

 
垂直对齐：<select name="vcssVerticalAlign" id="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 name="vcssClear" id="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 name="vcssOverflow" id="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 name="vcssPosition" id="vcssPosition"> 
  <option selected>选择</option> 
  <option value="absolute">绝对</option> 
  <option value="relative">相对</option>  
</select> 
Z坐标：<input name="vcssZIndex" id="vcssZIndex" class="normal_input" size="5" value="" onMouseOut="event.cancelBubble=true;this.className='normal_input';" /> 
left:<input name="vcssLeft" id="vcssLeft" class="normal_input" size="4" value="" /> 
top:<input name="vcssTop" id="vcssTop" class="normal_input" size="4" /> 
right:<input name="vcssRight" id="vcssRight" class="normal_input" size="4" /> 
bottom:<input name="vcssBottom" id="vcssBottom" class="normal_input" size="4" /> 

 
UL列表：类型<select name="vcssListStyleType" id="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 name="vcssListStyleImageBtn" type="button" id="vcssListStyleImageBtn" onclick="vcssListStyleImage.click();" value="..."> 
<input name="vcssListStyleImage" id="vcssListStyleImage" type="file" value="" style="display:none;" /> 
位置：<input type="radio" name="vcssListStylePosition" value="inside" onClick="if(this.checked)vcssPositionResult.value=this.value">内 
<input type="radio" name="vcssListStylePosition" value="outside" onClick="if(this.checked)vcssPositionResult.value=this.value">外 
<input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetPosition" onClick="if(this.checked)vcssPositionResult.value='';" />× 
<input name="vcssPositionResult" type="hidden" /> 
 光标： 
<select name="vcssCursor" id="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 name="vcssOk" type="button" id="vcssOk" onClick="setSelectionWithCss(1);" value="确定"> 
<input name="vcssCancel" type="button" id="vcssCancel" value="取消"> 
<input name="vcssView" type="button" id="vcssView" onClick="setSelectionWithCss(2);" value="应用"> 
 <input name="vcssImport" type="button" id="vcssImport" value="@import.."> 
 <input name="vcssSave" type="button" id="vcssSave" value="保存.."> 
 <input name="vcssLoad" type="button" id="vcssLoad" value="载入.."> 
 
<fieldset style="padding:10px; "><legend>实际应用效果如下</legend><div id="vcsseffect_div" class="vcsseffect"> 
Effect of This Rule Shows You at here! 

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

<hr /> 
<textarea name="cssTextValue" cols="100" rows="5" id="cssTextValue"></textarea> 
<input name="vcssView" type="button" id="vcssView" onclick="window.clipboardData.setData('text',document.all.cssTextValue.value);alert('CSS已保存到剪贴板');" value="复制到剪切板"> 
<textarea name="cssTextValueCompare" cols="100" rows="5" id="cssTextValueCompare"></textarea> 
<input name="vcssView2" type="button" id="vcssView" onclick="window.clipboardData.setData('text',document.all.cssTextValueCompare.value);alert('CSS已保存到剪贴板');" value="复制到剪切板"> 
<hr /> 
<div class="vv" id="vv" contentEditable="true" 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 type="button" id="vcssView" onclick="getSelectionWithCss();setSelectionWithCss()" value="获取左侧DIV样式"> 
<div style="width:100% "> </div> 
</div> 
</body> 
</html> 


  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：网页颜色搭配技巧文字字体、字号、字体排版等
下一个：iframe的使用用法
更多图片编程知识: