DIV+CSS编辑器

来源：互联网发布：手机充值软件加盟编辑：程序博客网时间：2024/05/22 00:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIV+CSS编辑器</title>

<!--

html,body{height:100%;}*{font-size:12px;}.vcsseffect{background-color:#fff;background-image:url(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;

margin-right: auto;

margin-left: auto;

}.DetailCSSboxModel{

height:100%;

margin-right: auto;

margin-left: auto;

}.MainBody{

height:400px;

width: 760px;

margin-left: auto;

margin-right: auto;

}

-->

</style>

<!--

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+" { ";

for(var v=0;v<everyRule.length-1;v++)

{

resultCSSTEXT+=everyRule[v]+"; ";

}

resultCSSTEXT+=" }";

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>

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+CSS编辑器

</font>

</p>

类/标签/ID：<input name="vcssIdentName" id="vcssIdentName" value=".style1" class="normal_input" onmouseover="select();" onMouseOut="event.cancelBubble=true;this.className='normal_input';" />

所有数值都不用输入单位;<br />

宽：<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)" /><br>

边框：<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';" />

<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><br>

外间距 Margin ：<input name="vcssMargin" type="text" onKeyDown="if(event.keyCode==32)this.value+='px';" class="normal_input" id="vcssMargin" value="" size="20" />

如:10px 2px <br>

内间距 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<br>

浮动：左<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='';" />

显示：<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">隐藏

<br>

文本对齐：<select name="vcssTextAlign" id="vcssTextAlign" onclick="if(value=='')value='center';">

<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>

文字缩进：<input name="vcssTextIndent" type="text" class="normal_input" id="vcssLineHeight4" value="" size="8" />

<br>

文本：<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">无

<br>

背景图片：<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>

<br>

水平位置：<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>

<br />

垂直对齐：<select name="vcssVerticalAlign" id="vcssVerticalAlign" onclick="if(value=='')value='middle';">

<option value="middle">middle</option>

<option value="bottom">bottom</option>

<option value="baseline">baseline</option>

</select>

清除：<select name="vcssClear" id="vcssClear" onclick="if(value=='')value='both';">

<option value="right">right</option>

</select>

Overflow：<select name="vcssOverflow" id="vcssOverflow" onclick="if(value=='')value='hidden';">

<option value="scroll">scroll</option>

<option value="hidden">hidden</option>

</select>

<br />

定位：<select name="vcssPosition" id="vcssPosition">

</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" />

<br />

UL列表：类型<select name="vcssListStyleType" id="vcssListStyleType" onclick="if(value=='')value='none';">

<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 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">外

光标：

<option value="crosshair">crosshair</option>

<option value="default">default</option>

<option value="pointer">pointer</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><br /><br />

<br><fieldset style="padding:10px; "><legend>实际应用效果如下</legend><div id="vcsseffect_div" class="vcsseffect">

Effect of This Rule Shows You at here!

<br>工具啦（www.tool.la）给你最全、最好的工具！</div>

</fieldset><br></p></div></div>

<hr />

<hr />

这是一个使用了复杂的样式的DIV，你可以使用获取CSS来获取这个CSS

</div><input type="button" id="vcssView" onclick="getSelectionWithCss();setSelectionWithCss()" value="获取左侧DIV样式">

</div>

</body>

</html>