用js实现的DIV+CSS编辑器代码

DIV+CSS编辑器

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

在线DIV+CSS编辑器

类/标签/ID：
所有数值都不用输入单位;

宽：
高：
背景色：
前景色：

边框：
颜色：

选择soliddottednonehiddendasheddoublegrooveridgeinsetoutset

外间距 Margin ：
如:10px 2px

内间距 Padding：
如:10px 2px

浮动： 左
右
×

显示：
选择
block
inline
none

可见：可见
隐藏
×

文本对齐：
选择
left
center
right

行高：

%
无
px

文字缩进：

文本：
字体：
选择宋体黑体Arial雅黑
粗细：
效果：下划线
无
×

背景图片：
重复：选择横向重复纵向重复不重复

水平位置：
垂直位置：
附件：选择固定滚动

垂直对齐：
选择
middle
bottom
top
auto
baseline

清除：
选择
left
right
both

Overflow：
选择
scroll
auto
hidden

定位：
选择
绝对
相对

Z坐标：
left:
top:
right:
bottom:

UL列表：类型
选择
none
disc
circle
square
decimal

图像：

位置：内
外
×

光标：

选择
默认
手
文本
移动
crosshair
default
pointer
hand
move
help
wait
text
w-resize
s-resize
n-resize
e-resize

实际应用效果如下

Effect of This Rule Shows You at here!

工具啦 （www.tool.la） 给你最全、最好的工具！


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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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.o

  • js实现文本框选中的方法

    本文实例讲述了js实现文本框选中的方法.分享给大家供大家参考.具体如下: 这段javascript代码可解决文本框获得焦点,即使得文本框的内容被选中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • js显示文本框提示文字的方法

    本文实例讲述了js显示文本框提示文字的方法.分享给大家供大家参考.具体实现方法如下: <!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"> <

  • JS模仿编辑器实时改变文本框宽度和高度大小的方法

    JS模仿编辑器实时改变文本框宽度和高度大小的方法

    本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法.分享给大家供大家参考.具体如下: 这里演示JS模仿编辑器中实时改变文本框大小,包括宽度和高度的方法,在一些在线编辑器,比如eWebEditor中,就有一个功能,让文本框不断的增大或减小,以适应页面的大小,这个功能是如何实现的呢?请您参考一下这个程序,相信你会从中获益. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/

  • js实现文本框宽度自适应文本宽度的方法

    js实现文本框宽度自适应文本宽度的方法

    本文实例讲述了js实现文本框宽度自适应文本宽度的方法.分享给大家供大家参考.具体如下: 一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长. 运行效果如下图所示: 具体代码如下: <!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> <html

  • JS限制文本框只能输入数字和字母方法

    限制只能输入数字 复制代码 代码如下: // ---------------------------------------------------------------------- // <summary> // 限制只能输入数字 // demo: $(".onlyNum").onlyNum(); 限制使用了onlyNum类样式的控件只能输入数字 // </summary> // --------------------------------------

  • js限制文本框只能输入中文的方法

    js限制文本框只能输入中文的方法

    本文实例讲述了js限制文本框只能输入中文的方法.分享给大家供大家参考.具体如下: 让文本框只能输入中文的方法及代码,如果你不小心输入了英文,它会自动倒回去,清空你的输入,直至你输入了中文它可会继续,很有意思,也很实用,当注册一些资料的时候可以来提升输入的准确度. 运行效果如下图所示: 具体代码如下: <html> <head> <title>让一个文本框只能输入汉字的方法</title> <meta http-equiv="Content-T

  • JSON 编辑器实现代码

    JSON 编辑器实现代码

    大家可以输入或者粘贴一些JSON数据来校验是否正确. 按Tab键自动全文缩进格式化.  JSON 编辑器核心代码 复制代码 代码如下: <script type="text/javascript"><!-- /* main Object */ JE={ data:{},/* 关联数据 */ code:false,/* 格式化后的代码 */ oldCode:[],/* 历史代码 */ editUI:null,/* 关联编辑框 */ msgUI:null,/* 信息显示窗

  • 百度编辑器从Json对象中取值，完成初次渲染，在编辑器内画表格

    第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念. 在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里需要先console.log(editor);在官方API中已经告诉我们写入的方法是setContent(),这里只要能传入我们最终拼好的的字符串,即可以在初始化中,绘制出我们想要的任何节点. 再send()完成之后,onreadystatechange = function(){},先上一段AJAX的代码.这段AJAX是消除游览器兼容,从尼古拉斯的书中学

  • 学习js在线html(富文本,所见即所得)编辑器

    你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框.textarea不行,它只能用来输入纯文本,不能显示颜色.斜体之类的文字样式,就像记事本.你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑. 复制代码 代码如下: <iframe id="myEditer" width="100%" height="150px"></iframe>

随机推荐