DIV+CSS Editor code with JS implementation-Experience Exchange
Last Update:2016-05-16
Source: Internet
Author: User
<! 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=" div+ CSS Editor is an online edit div+css online editing Tool "/> <meta content=" div+css editor, online editing, 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> </pead><object id=dlghelper classid= "clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" Width= "0px" height= "0px" ></OBJECT> <body> <p align= "center" > Online div+css Editor </p> <p> class/ Label/id:<input name= "Vcssidentname" id= "Vcssidentname" 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 pitch Margin: <input name=" Vcssmargin "type=" text " Onkeydown= "if (event.keycode==32) this.value+= ' px ';" class= "Normal_input" id= "Vcssmargin" value= "" size= "/> : 10px 2px inner pitch 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="/> such as: 10px 2px floating: Left <input type= "Radio" name= "Vcssfloat" onclick= " if (this.checked) vcssfloatresult.value=this.value "value=" left "> 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 "/> Display: <select name=" Vcssdisplay "id=" VcssdispLay "> <option selected> Select <option value=" Block ">block <option value=" inline ">inline <optio N value= "None" >none </select> visible: <input type= "Radio" name= "vcssvisibility" value= "visible" 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= "Cente R ">center</option> <option value=" right ">right</option> </select> row 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 value= "%" >%</option> <option selected > None </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 (value== ') value= ' Arial '; ><option selected> Select </option><option value= "Arial" > Song body <option value= "blackbody" > Blackbody <option Value = "Arial" >arial<option value= "Microsoft Jas Black" > Jas 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 "> Underline <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 Image: <input 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" > Transverse repeat <option value= "repeat-y" > Longitudinal repeat <option Value= "No-repeat" > Non-repeating </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 "/> Accessories:< Select Name= "vcssbackgroundattachment" id= "vcssbackgroundattachment" onclick= "if (value==") value= ' fixed '; " ><option selected> Select <option value= "fixed" > Fixed <option value= "scroll" > Scrolling </select> Vertical alignment: <select name= "vcssverticalalign" id= "vcssverticalalign" onclick= "if (value==") value= ' middle '; " > <option selected> Select </option> <option value= "Middle" >middle</option> <option value= "b Ottom ">bottom</option> <option value=" Auto ">top</option> <option value=" Auto ">auto</ Option> <option value= "Baseline" >baseline</option> </select> clear: <select name= "Vcssclear" id= "Vcssclear" onclick= "if (value== ') value= ' both ';" > <option selected> Select </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> Select </option> <option value= "scroll" >scroll</option> <option value= "a Uto ">auto</option> <option value=" hidden ">hidden</option> </select> positioning: <select name=" Vcssposition "id=" vcssposition "> <option selected> Select </option> <option value=" Absolute "> Absolute </ option> <option value= "relative" > relative </option> </select> 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"/> right:<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 "onclick=" if (value== ') value= ' none '; " > <option selected> Select </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> Image: <input name= " VCSSLISTSTYLEIMAGEBTN "type=" button "id=" vcssliststyleimagebtn "onclick=" Vcssliststyleimage.click (); "Value=" ... " > <input name= "vcssliststyleimage" id= "vcssliststyleimage" type= "file" value= "" style= "display:none;"/> 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 "> <input type=" Radio "name=" vcssvisibility "class=" Hiddenobj "id=" Unsetposition "OnClick = "if (this.checked) vcsspositionresult.value="; "/>x<input name=" Vcsspositionresult "type=" hidden "/> cursor: <select name= "Vcsscursor" id= "Vcsscursor" onclick= "if (value==") value= ' pointer '; " > <option selected> Select </option> <option value= "Default" > Defaults </option> <option value= "Poin ter > Hand </option> <option value= "text" > Text </option> <option value= "Move" > 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=" OK "> <input name=" vcsscancel "type=" button "id=" Vcsscancel "value=" Cancel "> <input name=" vcssview "type=" button "id=" Vcssview "onclick=" setselectionwithcss (2); " Value= "Apply" > <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= "load in ..." > <fieldset style= "padding:10px; "><legend> actual application effect is as follows </legend> Effect of this Rule shows your at here! Tools (www.tool.la) give you the most complete, the best tools! </fieldset></p> <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 has been saved to clipboard '); "value=" copied to shear Board "> <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 clipboard "> <pr/> This is a div that uses a complex style, you can use get CSS to get this CSS <input type=" button "id=" Vcssview "onclick=" Getselectionwithcss (); Setselectionwithcss () "value=" get left div style > </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]