这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
早些时候见过一个鸟日本人写的 DW 中的样式设置
http://www.99yp.com/uploads/200607/css/index.htm,写了一大堆的代码,靠,现在派不上用场,小鸽子写了一个更好的样式生成器,适合 DIV+CSS 架构的网页。
(在网吧做网页的朋友,可以使用这个呀!) 将常用的样式写了出来,做成 DW 的扩展插件多好,麻烦高手把他做成 DW 的扩展插件:
小鸽子个人网:
http://xbnz.126.com/[网址助记: 新白娘子]
- <!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">
- <!-- ┌─────『恋婷娱乐秀』────────┐ │最愛丁香花Vickey ChenQQ:106456213 │ └───────.NET(WEB2.0)───────┘
- -->
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>
- ▒ 恋婷DIV+CSS编辑器 beta1.0
- </title>
- <style type="text/css" media="screen">
- <!-- html,body{height:100%;}*{font-size:12px;}.vcsseffect{background-color:#fff;background-image:url(http//vickeychen.ik8.com/css/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;
- float:left;}.DetailCSSboxModel{height:100%; float:left;}.MainBody{height:400px;}
- -->
- </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;
- 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>
- <div onmouseover="hoverInput(event.srcElement,1);" onmouseout="hoverInput(event.srcElement,2);"
- onkeyup="setSelectionWithCss(2);">
- <div>
- <p>
- 类/标签/ID:
- <input name="vcssIdentName" id="vcssIdentName" value=".style1" class="normal_input"
- onmouseover="select();" onmouseout="event.cancelBubble=true;this.className='normal_input';"
- />
- 所有数值都不用输入单位; 宽:
- <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)" />
- 边框:
- <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';"
- />
- <select name="vcssBorderdStyle" id="vcssBorderdStyle" onclick="if(value=='')value='solid';">
- <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>
- 外间距 Margin :
- <input name="vcssMargin" type="text" onkeydown="if(event.keyCode==32)this.value+='px';"
- class="normal_input" id="vcssMargin" value="" size="20" />
- 如:10px 2px 内间距 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 浮动: 左
- <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='';" />
- <a title="取消浮动属性" href="/article/14/0614/39.html">
- ×
- </a>
- <input name="vcssFloatResult" type="hidden" />
- 显示:
- <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">
- 隐藏
- <input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetVisibility"
- onclick="if(this.checked)vcssVisibilityResult.value='';" />
- <a title="取消可见属性" href="/article/14/0614/39.html">
- ×
- </a>
- <input name="vcssVisibilityResult" type="hidden" />
- 文本对齐:
- <select name="vcssTextAlign" id="vcssTextAlign" onclick="if(value=='')value='center';">
- <option selected>
- 选择
- </option>
- <option value="left">
- left
- </option>
- <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 name="vcssLineUnit" id="select5">
- <option value="%">
- %
- </option>
- <option selected>
- 无
- </option>
- <option value="px">
- px
- </option>
- </select>
- 文字缩进:
- <input name="vcssTextIndent" type="text" class="normal_input" id="vcssLineHeight4"
- value="" size="8" />
- 文本:
- <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">
- 无
- <input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetDecoration"
- onclick="if(this.checked)vcssDecorationResult.value='';" />
- <a title="取消文字效果属性" href="/article/14/0614/39.html">
- ×
- </a>
- <input name="vcssDecorationResult" type="hidden" />
- 背景图片:
- <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>
- 水平位置:
- <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>
- 垂直对齐:
- <select name="vcssVerticalAlign" id="vcssVerticalAlign" onclick="if(value=='')value='middle';">
- <option selected>
- 选择
- </option>
- <option value="middle">
- middle
- </option>
- <option value="bottom">
- bottom
- </option>
- <option value="auto">
- top
- </option>
- <option value="auto">
- auto
- </option>
- <option value="baseline">
- baseline
- </option>
- </select>
- 清除:
- <select name="vcssClear" id="vcssClear" onclick="if(value=='')value='both';">
- <option selected>
- 选择
- </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>
- 选择
- </option>
- <option value="scroll">
- scroll
- </option>
- <option value="auto">
- auto
- </option>
- <option value="hidden">
- hidden
- </option>
- </select>
- 定位:
- <select name="vcssPosition" id="vcssPosition">
- <option selected>
- 选择
- </option>
- <option value="absolute">
- 绝对
- </option>
- <option value="relative">
- 相对
- </option>
- </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"
- />
- UL列表:类型
- <select name="vcssListStyleType" id="vcssListStyleType" onclick="if(value=='')value='none';">
- <option selected>
- 选择
- </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>
- 图像:
- <input name="vcssListStyleImageBtn" type="button" id="vcssListStyleImageBtn"
- onclick="vcssListStyleImage.click();" value="...">
- <input name="vcssListStyleImage" id="vcssListStyleImage" type="file" value=""
- style="display:none;" />
- 位置:
- <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">
- 外
- <input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetPosition"
- onclick="if(this.checked)vcssPositionResult.value='';" />
- <a title="取消列表效果属性" href="/article/14/0614/39.html">
- ×
- </a>
- <input name="vcssPositionResult" type="hidden" />
- 光标:
- <select name="vcssCursor" id="vcssCursor" onclick="if(value=='')value='pointer';">
- <option selected>
- 选择
- </option>
- <option value="default">
- 默认
- </option>
- <option value="pointer">
- 手
- </option>
- <option value="text">
- 文本
- </option>
- <option value="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="确定">
- <input name="vcssCancel" type="button" id="vcssCancel" value="取消">
- <input name="vcssView" type="button" id="vcssView" onclick="setSelectionWithCss(2);"
- value="应用">
- <input name="vcssImport" type="button" id="vcssImport" value="@import..">
- <input name="vcssSave" type="button" id="vcssSave" value="保存..">
- <input name="vcssLoad" type="button" id="vcssLoad" value="载入..">
- <fieldset style="padding:10px; ">
- <legend>
- 实际应用效果如下
- </legend>
- <div>
- Effect of This Rule Shows You at here! [中國最Q小鴿子·最愛丁香花] http://xbnz.126.com
- </div>
- </fieldset>
- </p>
- </div>
- </div>
- <div>
- <img class="img-responsive" src="http://vickeychen.ik8.com/temp/CSS_BOX_3D.gif"
- data-src="" />
- </div>
- </div>
- <hr />
- <textarea name="cssTextValue" cols="100" rows="5" id="cssTextValue">
- </textarea>
- <input name="vcssView" type="button" id="vcssView" onclick="window.clipboardData.setData('text',document.all.cssTextValue.value);alert('CSS已保存到剪贴板');"
- value="复制到剪切板">
- <textarea name="cssTextValueCompare" cols="100" rows="5" id="cssTextValueCompare">
- </textarea>
- <input name="vcssView2" type="button" id="vcssView" onclick="window.clipboardData.setData('text',document.all.cssTextValueCompare.value);alert('CSS已保存到剪贴板');"
- value="复制到剪切板">
- <hr />
- <div contenteditable="true">
- 这是一个使用了复杂的样式的DIV,你可以使用获取CSS来获取这个CSS
- </div>
- <input type="button" id="vcssView" onclick="getSelectionWithCss();setSelectionWithCss()"
- value="获取左侧DIV样式">
- <div>
- </div>
- <hr />
- <img class="img-responsive" src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF"
- border="0" data-src="" />
- </body>
- </html>
来源: http://www.phperz.com/article/17/0707/289452.html