繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容
JS轻松实现CSS设置,DIV+CSS常用CSS设置
发布：dxy 字体：[
增加
减小
] 类型：转载
早些时候见过一个鸟日本人写的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(<a href="http://www.jb51.net/list/list_62_1.htm" target="_blank"><font color=red>WEB2.0</font></a>)───────┘ --> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>▒ 恋婷DIV+CSS编辑器 beta1.0</title> <style type="text/css" media="screen"> <!-- html,body{height:100%;}*{font-size:12px;}.vcsseffect{background-color:#fff;background-image:url(http//vickeychen.ik8.com/css/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; float:left;}.DetailCSSboxModel{height:100%; float:left;}.MainBody{height:400px;} --> </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> <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;"> 类/标签/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='';" /> <a onClick="unsetFloat.click();" style="cursor:pointer;" title="取消浮动属性">×</a> <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='';" /><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 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='';" /><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 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='';" /><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="载入.."> <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> </div></div> <div class="DetailCSSboxModel"> <img src="http://vickeychen.ik8.com/temp/CSS_BOX_3D.gif" alt="[说明]:IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有；设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而Mozilla会在宽度基础上加上这个值." /> </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 /> <a href="http://vickeychen.ik8.com/" target="_blank"><img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" border="0" /></a> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
JS轻松实现CSS设置
DIV+CSS常用CSS设置
百度中搜索更多的关于
JS轻松实现CSS设置,DIV+CSS常用CSS设置
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
用YUI做了个标签浏览效果
下一篇文章：
JavaScript的9个陷阱及评点分析
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
一页面多XMLHttpRequest对象
Ucren Virtual Desktop V2.0
JS值当前DIV的ID值的代码
使javascript也能包含文件
Javascript实现的分页函数
用JS控制表格的逐行变色的表单
用js+xml自动生成表格的东西
一个对于js this关键字的问题
JavaScript的面向对象(二)
通用于ie和firefox的函数 GetCurrentStyl
最 近 更 新
静态页面也可以实现预览 列表不同的显示方
JS动画效果代码2
用javascript来实现动画导航效果的代码
打印/预览/设置的客户端代码
用Javascript做flash做的事..才完成的一个
firefox 和 ie 事件处理的细节,研究,再研
用javascript获得css中的属性值的代码
js自动滑动+鼠标滑动区域
常用参考资料（手册）下载或者链接
获取Javscript执行函数名称的方法
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句