JS轻松实现CSS设置,DIV+CSS常用CSS设置

早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm，写了一大堆的代码，靠，现在派不上用场，小鸽子写了一个更好的样式生成器，适合DIV+CSS架构的网页。
（在网吧做网页的朋友，可以使用这个呀！）将常用的样式写了出来，做成DW的扩展插件多好，麻烦高手把他做成DW的扩展插件：
小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子]

<！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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>▒ 恋婷DIV+CSS编辑器 beta1.0</title> <style type="text/css" media="screen"></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></head><OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT><body>类/标签/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> Effect of This Rule Shows You at here！ [中國最Q小鴿子·最愛丁香花] http：//xbnz.126.com </fieldset><br/><img src="http://vickeychen.ik8.com/temp/CSS_BOX_3D.gif" alt="[说明]:IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有；设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而Mozilla会在宽度基础上加上这个值." /> <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，你可以使用获取CSS来获取这个CSS <input type="button" id="vcssView" onclick="getSelectionWithCss（）;setSelectionWithCss（）" value="获取左侧DIV样式"><hr /> <img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" border="0" /> </body> </html>

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