位置：首页>> 网络编程>> JavaScript>> JS实现css边框样式设置工具

JS实现css边框样式设置工具

作者：vickeychen　来源：经典论坛　发布时间：2008-05-25 16:22:00　

标签：边框,样式,工具,css

非常好的边框样式设置工具,使用该工具您可以很方便的为DIV设置简单的边框样式，如果放在DW中会更好。

会制作DW插件的高手，请帮忙制作成DW插件：

截图：

运行代码：

<!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>JS轻松实现设置div边框样式 - asp之家</title><style>*{font-size:12px;}#vcssdivBoderMidlayout,#vcssdivBoderLeftlayout,#vcssdivBoderRightlayout{float:left;}#vcssdivBoderMidlayout ul{list-style-type:none;margin:0;}#vcssdivBoderMidlayout li{width:100px;text-align:center}#vcssdivBoderMidlayout input{width:20px;height:20px;border:1px solid #ccc;background-color:#FFFFFF;margin:2px;}#vcssdivBoderRightlayout input{width:50px;height:50px;background-color:#FFFFFF;border:0;}</style><script>var sInitColor = null;function callColorDlg(obj){if (sInitColor == null) var sColor = dlgHelper.ChooseColorDlg();elsevar 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;if(obj.tagName=='INPUT')obj.value=sColor;obj.style.backgroundColor=sColor;}}</script></head><body><OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT><div style="width:100％"><div class="vcssdivBorder" id="vcssdivBorder"><div id="vcssdivBoderLeftlayout">连线色:<input name="vcssdivBorderColor" onClick="callColorDlg(this);" id="vcssdivBorderColor" value="#ff0000" onfocus="setSelectBorderStyle(vcssdivBorderPreview);" onblur="setSelectBorderStyle(vcssdivBorderPreview);" onpropertychanges="setSelectBorderStyle(vcssdivBorderPreview);" /><br />宽　度:<input name="vcssdivBorderWidth" id="vcssdivBorderWidth" value="1px" /><br />样　式:<select name="vcssdivBorderStyle" id=""><option value="solid" selected>solid</option><option value="dotted">dotted</option><option value="none">none</option></select></div><div id="vcssdivBoderMidlayout"><ul><li><input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderTop')" value="　" name="vcssdivBorderTop" style="border-top:1px solid #cc7700;" /> <input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderBottom')" value="　" name="vcssdivBorderBottom" style="border-bottom:1px solid #cc7700;" /></li><li><input type="checkbox" onClick="unsetSelectBorderStyle(this,'border')" value="　" name="vcssdivBorderAll" style="border:1px solid #cc7700;" /></li><li><input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderLeft')" value="　" name="vcssdivBorderLeft" style="border-left:1px solid #cc7700;" /> <input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderRight')" value="　" name="vcssdivBorderRight" style="border-right:1px solid #cc7700;" /></li></ul></div><div id="vcssdivBoderRightlayout">效果如下:<br /><input type="button" value="　" id="vcssdivBorderPreview" name="vcssdivBorderPreview" onClick="document.getElementById('divcode').innerHTML=this.style.cssText" /></div></div></div><p><input type="button" value="设置" onClick="document.getElementById('new_div').style.cssText=document.getElementById('vcssdivBorderPreview').style.cssText;document.getElementById('divcode').innerHTML=vcssdivBorderPreview.style.cssText" /></p><div id="new_div">点击"设置"，为我添加边框</div>css代码如下：<div id="divcode"></div><script>function setSelectBorderStyle(obj){obj.style.border=document.getElementById('vcssdivBorderWidth').value+" "+document.getElementById('vcssdivBorderStyle').value+" "+document.getElementById('vcssdivBorderColor').value;}function unsetSelectBorderStyle(obj,css){if(!obj.checked){eval("vcssdivBorderPreview.style."+css+"='0'");}else{eval("vcssdivBorderPreview.style."+css+"='"+document.getElementById('vcssdivBorderWidth').value+" "+document.getElementById('vcssdivBorderStyle').value+" "+document.getElementById('vcssdivBorderColor').value+"'");}}</script></body></html>

投稿

JS实现css边框样式设置工具

猜你喜欢