DIV+CSS Editor code with JS implementation-Experience Exchange

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]
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.