您的位置: 首页 > IT文章 > 经验交流 > 用js实现的DIV+CSS编辑器代码

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

分类: IT文章 • 2022-05-12 09:47:39

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<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">  </style>
<object id="dlgHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="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 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>
<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 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='';"><a onclick="unsetFloat.click();" style="cursor:pointer;" title="取消浮动属性">×</a> <input name="vcssFloatResult" type="hidden"> 显示：<select name="vcssDisplay" id="vcssDisplay"><option selected>选择   </option>
<option value="block">block   </option>
<option value="inline">inline   </option>
<option value="none">none </option></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='';"><a onclick="unsetVisibility.click();" style="cursor:pointer;" title="取消可见属性">×</a> <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>
<option value="黑体">黑体</option>
<option value="Arial">Arial</option>
<option value="微软雅黑">雅黑</option></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='';"><a onclick="unsetDecoration.click();" style="cursor:pointer;" title="取消文字效果属性">×</a> <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>
<option value="repeat-x">横向重复</option>
<option value="repeat-y">纵向重复</option>
<option value="no-repeat">不重复</option></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>
<option value="fixed">固定</option>
<option value="scroll">滚动</option></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='';"><a onclick="unsetPosition.click();" style="cursor:pointer;" title="取消列表效果属性">×</a> <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="载入.."></p>
<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>
</div>
</div> <hr>
<textarea name="cssTextValue" cols="100" rows="5" id="cssTextValue"><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"><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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]