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"> 
<!-- 
┌─────『恋婷娱乐秀』────────┐ 
│最愛丁香花　Vickey Chen　QQ:106456213   │ 
└───────.NET(× 
<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!

[中國最Q小鴿子·最愛丁香花] http：//xbnz.126.com</div> 
</fieldset>
</p></div></div> 
<div class="DetailCSSboxModel"> 
 
</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><hr /> 
如需引入外部Js需刷新才能执行]</div>

<hr>

</div>
			</div>

</div>
       
      <div class="col-md-4">
	
	
	<div class="panel panel-default">
		
		<div class="panel-heading"> <a href="/php/">PHP教程</a></div>
		<div class="list-group">
<a href="/php/1.html" class="list-group-item">PHP简介</a>
<a href="/php/8.html" class="list-group-item">PHP基本语法</a>
<a href="/php/12.html" class="list-group-item">PHP类型</a>
<a href="/php/24.html" class="list-group-item">PHP变量</a>
<a href="/php/34.html" class="list-group-item">PHP运算符</a>
<a href="/php/47.html" class="list-group-item">PHP控制结构</a>
<a href="/php/67.html" class="list-group-item">PHP函数</a>
<a href="/php/74.html" class="list-group-item">PHP类与对象</a>
<a href="/php/110.html" class="list-group-item">PHP异常处理</a>
<a href="/php/function.php" class="list-group-item">函数库分类</a>
						     
				
						
					</div>
					
	</div>
				
</div>

</div>

<div class="panel panel-default">
        <div class="panel-heading">快速导航</div>
        <div class="panel-body">
                       <a href="/list.php?id=1">PHP</a>
<a href="/list.php?id=2">MySQL</a>
<a href="/list.php?id=3">HTML</a>
<a href="/list.php?id=4">CSS</a>
<a href="/list.php?id=5">JavaScript</a>
<a href="/list.php?id=6">MSSQL</a>
<a href="/list.php?id=10">AJAX</a>

<a href="/list.php?id=14">Linux</a>
<a href="/list.php?id=17">Mac</a>
<a href="/list.php?id=7">ASP</a>
<a href="/list.php?id=11">服务器</a>

<a href="/list.php?id=15">SQL</a>
<a href="/list.php?id=16">jQuery</a>

<a href="/list.php?id=18">C#</a>
<a href="/list.php?id=19">C++</a>
<a href="/list.php?id=20">java</a>
<a href="/list.php?id=21">Android</a>
<a href="/list.php?id=22">IOS</a>
<a href="/list.php?id=23">oracle</a>
<a href="/list.php?id=24">MongoDB</a>

<a href="/list.php?id=26">SQLite</a>
<a href="http://wamp.phpstudy.net/">wamp</a>
<a href="/jiaotong/">交通频道</a>   
	<span style="display:none">

</span>
                    </div>
    </div>

<hr>

</div>

<div class="bottom">
	
	<div class="container">
   Copyright © 2016 phpStudy  | 豫ICP备2021030365号-3<script src="/images/foot.js?1"></script>
    </div>
</div>
<script src="/js/foot2.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>