Using JS to implement the DIV+CSS editor code _ Experience Exchange

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>div+css Editor </title> <meta Http-equiv=content-type content= "text/html; charset=gb2312 "> <meta content=" All "name=" robots/> <meta "name=" description "content=" The CSS editor is an online edit div+css online editing Tool "/> <meta content=" Div+css editor, online Editor, Div+css,div+css tool, online tool "name=" keywords <style type= "text/css" media= "screen" > <!--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> <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; functionCallcolordlg (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></pead><object id=dlghelper classid= "clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width= "0px" height= "0px" ></OBJECT> <body> <p align= "center" > <font > Online div+css editor </font> </p> <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" ><p> class/Label/id:<input name= "Vcssidentname" id= "Vcssidentna"Me "value=" Style1 "class=" Normal_input "onmouseover=" select (); "onmouseout=" event.cancelbubble=true; This.classname= ' normal_input '; "/> All values are not input units; Width: <input name= "Vcsswidth" type= "text" class= "Normal_input" id= "Vcsswidth" value= "" size= "8"/> High: <input name= " Vcssheight "type=" text "class=" Normal_input "id=" Vcssheight "value=" "size=" 8 "/> Background color: <input name=" Vcssbackgroundcolor "type=" text "class=" Normal_input "id=" Vcssbackgroundcolor "onmouseout=" event.cancelBubble=true ; This.classname= ' normal_input '; ' value= ' size= ' 8 ' onclick= ' Callcolordlg (this) '/> foreground: <input name= ' VcssColor ' Type= "text" class= "Normal_input" id= vcsscolor "value=" "size=" 8 "onmouseout=" event.cancelbubble=true; This.classname= ' normal_input '; "onclick=" Callcolordlg (This) "/> border: <input name=" Vcssborderwidth "onClick=" Value=1;vcssborderdstyle.value= ' solid '; "type=" text "class=" Normal_input "id=" Vcssborderwidth "value=" "size=" 8 " > Color: <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> Select <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> outer space Margin: <input name= "Vcssmargin" "type=" text "onkeydown=" if ( event.keycode==32) this.value+= ' px '; "class=" Normal_input "id=" Vcssmargin "value=" "size="/> such as: 10px 2px inner spacing Pa Dding:<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="/> such as: 10px 2px Floating: Left <input type= "Radio" name= "Vcssfloat" onclick= "if (this.checked) vcssfloatresult.value=this.value" value= " "> Right <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= '; "/>x<input name=" Vcssfloatresult "type=" hidden "/> Show: <select name=" VcssDispla Y "id=" Vcssdisplay "> <option selected> Select <option value=" block ">block <option" value= " ; inline <option value= ' None ' >none </select> visible: <input type= ' Radio ' name= ' vcssvisibility ' value= ' Visibl E "onclick=" if (this.checked) vcssvisibilityresult.value=this.value "> Visible <input type=" Radio "name=" Vcssvisibility "value=" hidden "onclick=" if (this.checked) VcssvisibilityreSult.value=this.value "> Hide <input type=" Radio Name= "vcssvisibility" class= "Hiddenobj" id= "unsetvisibility" Onclick= "if (this.checked) vcssvisibilityresult.value="; "/>x<input name=" Vcssvisibilityresult "type=" hidden "/> Text alignment: <select name=" vcsstextalign "id=" vcsstextalign "onclick=" if (value== ') value= ' center '; > <option selected> Select </option> <option value= "left" >left</option> <option value= "ce Nter ">center</option> <option value=" right ">right</option> </select> line height: <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 val Ue= "%" >%</option> <option selected> no </option> <option value= "px" >px</option> </ select> text indent: <input name= "vcsstextindent" type= "text" class= "NormaL_input "id=" VcssLineHeight4 "value=" size= "8"/> Text: <input name= "Vcssfontsize" type= "text" class= "Normal_input "Id=" Vcssfontsize "value=" 12px "size=" 5 "/> font: <select name=" vcssfontfamily "id=" vcssfontfamily "onclick=" if (VA lue== ') value= ' Arial '; ><option selected> Select </option><option value= "Arial" > Arial <option value= "black body" > blackbody <option Value = "Arial" >arial<option value= "Microsoft Ya hei" > Ya black </select> thickness: <input name= "Vcssfontweight" type= "text" class= "Normal_input" id= "VcssLineHeight3" value= "" size= "8" onmouseout= "Event.cancelbubble=true;this.classname=" Normal_ Input '; '/> Effect: <input type= ' Radio ' name= ' vcsstextdecoration ' value= ' underline ' onclick= ' if (this.checked) Vcssdecorationresult.value=this.value "> Underscore <input type=" Radio "name=" Vcsstextdecoration "value=" None "OnClick = "if (this.checked) vcssdecorationresult.value=this.value" > No <input type= "Radio" name= "Vcssvisibility" class= " Hiddenobj "id=" unsetdecoration "onclick=" if (this.Checked) vcssdecorationresult.value= '; "/>x<input name=" Vcssdecorationresult "type=" hidden "/> background picture: <in Put name= "Vcssbackgroundimage" type= "file" class= "Normal_input" id= "Vcssbackgroundimage" > Repeat: <select name= " Vcssbackgroundrepeat "id=" Vcssbackgroundrepeat "onclick=" if (value== ') value= ' no-repeat '; ><option selected> Select <option value= "Repeat-x" > Horizontal repeat <option value= "repeat-y" > Longitudinal repeat <option Value= "No-repeat" > No repeat </select> horizontal position: <input name= "Vcssbackgroundpositionx" type= "text" class= "Normal_ Input "id=" Vcssbackgroundpositionx "value=" "size=" 5 "/> Vertical position: <input name=" Vcssbackgroundpositiony "type=" text " class= "Normal_input" id= "Vcssbackgroundpositiony" value= "" size= "5"/> Attachment: <select name= " Vcssbackgroundattachment "id=" vcssbackgroundattachment "onclick=" if (value== ') value= ' fixed '; ><option selected> Select <option value= "fixed" > Fix <option value= "scroll" > Rolling </select> Vertical alignment: <select name= "vcssverticAlalign "id=" vcssverticalalign "onclick=" if (value== ') value= ' middle '; > <option selected> selection </option> <option value= "Middle" >middle</option> <option value = "Bottom" >bottom</option> <option value= "Auto" >top</option> <option value= "Auto" &GT;AUTO&L T;/option> <option value= "baseline" >baseline</option> </select> Purge: <select name= "Vcssclear" Id= "Vcssclear" onclick= "if (value== ') value= ' both ';" > <option selected> Select </option> <option value= "left" >left</option> <option value= "Ri Ght ">right</option> <option value=" Both ">both</option> </select> Overflow:<select Nam E= "Vcssoverflow" id= "Vcssoverflow" onclick= "if (value==") value= ' hidden '; > <option selected> selection </option> <option value= "Scroll" >scroll</option> <option value = "Auto" >auto</option> <option value= "hidden" >hidden</option> </select> positioning: <select name= "vcssposition" id= "vcssposition" > <option selected> selection </opt ion> <option value= "Absolute" > Absolute </option> <option value= "relative" > Relative </option> </sel ect> Z Coordinates: <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 "/> Righ T:<input name= "Vcssright" id= "Vcssright" class= "Normal_input" size= "4"/> bottom:<input name= "VcssBottom" id= "Vcssbottom" class= "Normal_input" size= "4"/> ul list: type <select name= "Vcssliststyletype" id= "Vcssliststyletype" on Click= "if (value== ') value= ' none ';" > <option selected> Select </option> <option value= "None" >none</option> <option value= "di SC ">disc</option> <option value= "Circle" >circle</option> <option "Square" >square</option> <option value= "decimal" >decimal</option> </select> Image: <input name= "VCSSLISTSTYLEIMAGEBTN" type = "button" id= "vcssliststyleimagebtn" onclick= "Vcssliststyleimage.click ();" value= "..." > <input name= " Vcssliststyleimage "id=" vcssliststyleimage "type=" file "value=" "/> Location: <input type=" Radio "name=" Vcssliststyleposition "value=" Inside "onclick=" if (this.checked) Vcsspositionresult.value=this.value "> Inside < Input type= "Radio" name= "Vcssliststyleposition" value= "Outside" onclick= "if (this.checked) vcsspositionresult.value= This.value "> Outside <input type=" Radio "name=" vcssvisibility "class=" Hiddenobj "id=" unsetposition "onclick=" if ( this.checked) vcsspositionresult.value= '; '/>x<input name= "Vcsspositionresult" type= "hidden"/> cursor: <sel ECT name= "vcsscursor" id= "Vcsscursor" onclick= "if (value== ') value= ' pointer ';" > <oPtion selected> Select </option> <option value= "Default" > Default </option> <option value= "pointer" > Hand </option> <option value= "text" > Text </option> <option value= "Move" > Mobile </option> <opt Ion 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= "OK" > <input name="Vcsscancel" type= "button" id= "Vcsscancel" value= "Cancel" > <input name= "vcssview" type= "button" id= "Vcssview" Onclick= "Setselectionwithcss (2);" value= "Application" > <input name= "vcssimport" type= "button" id= "Vcssimport" value= "@ Import ... " > <input name= "vcsssave" type= button "id=" Vcsssave "value=" Save ... " > <input name= "vcssload" type= button "id=" Vcssload "value=" Loading ... " > <fieldset ><legend> Actual application results are as follows </legend><div id= "Vcsseffect_div" class= "Vcsseffect" > Effect of this rule shows for your at here! Tools (www.tool.la) give you the most complete, the best tool! </div> </fieldset> </p></div></div> <pr/> <textarea name= "Csstextvalue" cols= "Rows=" 5 "id=" Csstextvalue "></textarea> <input name=" Vcssview "type=" button "id=" Vcssview "onclick=" Window.clipboardData.setData (' text ', document.all.cssTextValue.value); alert (' CSS saved to clipboard '); "value= Copy to clipping > <textarea name= "Csstextvaluecompare" cols= "rows=" 5 "id=" CsstextvaluecompaRe "></textarea> <input name=" vcssView2 "type=" button "id=" Vcssview "onclick=" Window.clipboardData.setData (' text ', document.all.cssTextValueCompare.value); alert (' CSS saved to clipboard '); "value=" copied to the clipping board "> <pr/> <div class= vv" id= "VV" contenteditable= "true" > This is a div that uses a complex style, you can use to get CSS to get this CSS </div ><input type= "button" id= "Vcssview" onclick= "getselectionwithcss (); Setselectionwithcss ()" value= "get left div style" > <div > </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]