用js实现的DIV+CSS编辑器代码_经验交流 程序员文章站 2022-04-15 10:08: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="取消浮动属性" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">×</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="取消可见属性" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">×</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="取消文字效果属性" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">×</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="取消列表效果属性" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu">×</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样式"> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]