Javascript 圆角div的实现代码


Posted in Javascript onOctober 15, 2009

现在实现圆角普遍用图片来控制,这种方法有其优点(产生的圆角平滑)。 但同时他也要求有吻合的图片,如果要动态的改变div的样式颜色则有些力不从心。还有就是用js来实现。
实现后的调用代码 如下

var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd") 
objDiv.Div.style.width="100px"; 
objDiv.Content.style.margin="6 6 6 6 " 
objDiv.Content.innerText="这是一个圆角div测试" 
document.body.appendChild(objDiv.Div);

Javascript 圆角div的实现代码
这样就产生了一个圆角div
实现原理:原理其实很简单,在div的top和bottom 加上三条线,用这三条线的不同长度来产生圆角的效果。

实现过程: 如何实现这三条线呢。 用<b> 这个元素,将其高度 设置为1px 。如果要显示边框则为其添加左边框和右边框。添加好线条以后,将内容div 和这三条线放在一个容器里,这个容器也是一个div。最终返回一个div类,这个类放两个属性,一个是容器div,通过这个容器div可以控制图形出现的位置和大小高度等属性。另一个属性是内容div,通过这个div可以设置这个div的内容,margin,字体颜色,背景颜色,字体大小,等属性。

注意的问题: 调用 getRoundDiv 这个方法需要传递一个方法上下文。我的理解是方法上下文相当与一个指针,指向调用方法的对象。为什么要用这个方法上下文呢? 比如要在ie的 creatPopup 方法 产生出来的popup文档内新建一个圆角div的话,由于popup只能加载他自己创建的控件,所以可以将popup对象传递到方法内部,成为方法上下文指向的对象。 传递上下文的方法有两种function.call(obj,"arg1","arg2") 类似与这样。 另一种是 function.apply(obj,arguments)

详细代码如下:

/**************************************************************************/ 
/*RoundDiv.js 产生一个圆角div 
调用前需设置函数上下文(上下文是指,要创建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd") 
函数参数argBorderStyle: 边框样式,字符串 例如 "1px solid black" 
函数参数argBgColor: 背景颜色,字符串 例如 "#ffffff" 
现在只支持边框为1像素 如果超过1像素产生的图形会比较奇怪 
如果不设置边框 则没有边框 可以正常使用 
本函数返回的是一个RoundDiv自定义类 
如果要设置div的内容请用 obj.Content.innerHtml 或 obj.Content.innerText设置 
如果要设置div的高度请用 obj.Div.style.width obj.Div.style.height设置 
*/ 
/**************************************************************************/ 
/**************************************************************************/ 
//取得一个圆角div 
function getRoundDiv(argBorderStyle,argBgColor){     //创建元素 
    var divPane =this.createElement("div") 
    var divContent =this.createElement("div") 
    var divContentMax =this.createElement("div") 
    var bTop =this.createElement("b") 
    var bBottom =this.createElement("b") 
    var bTop1 =this.createElement("b") 
    var bTop2 =this.createElement("b") 
    var bTop3 =this.createElement("b") 
    var bTop4 =this.createElement("b") 
    var bBottom1 =this.createElement("b") 
    var bBottom2 =this.createElement("b") 
    var bBottom3 =this.createElement("b") 
    var bBottom4 =this.createElement("b") 
    //背景设置 
    divPane.style.backgroundColor=argBgColor; 
    divContent.style.backgroundColor=argBgColor; 
    divContentMax.style.backgroundColor=argBgColor; 
    bTop1.style.backgroundColor=argBgColor; 
    bTop2.style.backgroundColor=argBgColor; 
    bTop3.style.backgroundColor=argBgColor; 
    bTop4.style.backgroundColor=argBgColor; 
    bBottom1.style.backgroundColor=argBgColor; 
    bBottom2.style.backgroundColor=argBgColor; 
    bBottom3.style.backgroundColor=argBgColor; 
    bBottom4.style.backgroundColor=argBgColor; 
    bTop.style.backgroundColor="#ffffff"; 
    bBottom.style.backgroundColor="#ffffff"; 
    //样式设置 
    bTop.style.overflow="hidden"; 
    bBottom.style.overflow="hidden"; 
    bTop1.style.overflow="hidden"; 
    bTop2.style.overflow="hidden"; 
    bTop3.style.overflow="hidden"; 
    bTop4.style.overflow="hidden"; 
    bBottom1.style.overflow="hidden"; 
    bBottom2.style.overflow="hidden"; 
    bBottom3.style.overflow="hidden"; 
    bBottom4.style.overflow="hidden"; 
    bTop.style.display="block"; 
    bBottom.style.display="block"; 
    bTop1.style.display="block"; 
    bTop2.style.display="block"; 
    bTop3.style.display="block"; 
    bTop4.style.display="block"; 
    bBottom1.style.display="block"; 
    bBottom2.style.display="block"; 
    bBottom3.style.display="block"; 
    bBottom4.style.display="block"; 
     
    //高度设置 
    divContent.style.height="100%"; 
    divContentMax.style.height="100%"; 
    bTop1.style.height="1px"; 
    bTop2.style.height="1px"; 
    bTop3.style.height="1px"; 
    bTop4.style.height="2px"; 
    bBottom1.style.height="1px"; 
    bBottom2.style.height="1px"; 
    bBottom3.style.height="1px"; 
    bBottom4.style.height="2px"; 
     
    //边框设置 
    divContentMax.style.borderLeft=argBorderStyle 
    divContentMax.style.borderRight=argBorderStyle 
    bTop1.style.borderLeft=argBorderStyle; 
    bTop1.style.borderRight=argBorderStyle; 
    bTop1.style.borderTop=argBorderStyle; 
    bTop2.style.borderLeft=argBorderStyle; 
    bTop2.style.borderRight=argBorderStyle; 
    bTop3.style.borderLeft=argBorderStyle; 
    bTop3.style.borderRight=argBorderStyle; 
    bTop4.style.borderRight=argBorderStyle; 
    bTop4.style.borderLeft=argBorderStyle; 
    bBottom1.style.borderLeft=argBorderStyle; 
    bBottom1.style.borderRight=argBorderStyle; 
    bBottom1.style.borderTop=argBorderStyle; 
    bBottom2.style.borderLeft=argBorderStyle; 
    bBottom2.style.borderRight=argBorderStyle; 
    bBottom3.style.borderLeft=argBorderStyle; 
    bBottom3.style.borderRight=argBorderStyle; 
    bBottom4.style.borderLeft=argBorderStyle; 
    bBottom4.style.borderRight=argBorderStyle; 
     
    //空白间距设置 
    bTop1.style.margin="0 4px 0 4px" 
    bTop2.style.margin="0 3px 0 3px" 
    bTop3.style.margin="0 2px 0 2px" 
    bTop4.style.margin="0 1px 0 1px" 
    bBottom1.style.margin="0 4px 0 4px" 
    bBottom2.style.margin="0 3px 0 3px" 
    bBottom3.style.margin="0 2px 0 2px" 
    bBottom4.style.margin="0 1px 0 1px" 
    //控件拼装 
    bTop.appendChild(bTop1); 
    bTop.appendChild(bTop1); 
    bTop.appendChild(bTop2); 
    bTop.appendChild(bTop3); 
    bTop.appendChild(bTop4);     
    bBottom.appendChild(bBottom4); 
    bBottom.appendChild(bBottom3); 
    bBottom.appendChild(bBottom2); 
    bBottom.appendChild(bBottom1); 
    divContentMax.appendChild(divContent) 
    divPane.appendChild(bTop) 
    divPane.appendChild(divContentMax) 
    divPane.appendChild(bBottom) 
    var objRoundDiv = new RoundDiv(); 
    objRoundDiv.Div=divPane; 
    objRoundDiv.Content=divContent; 
    return objRoundDiv; 
} 
/**************************************************************************/ 
/**************************************************************************/ 
//自定义类(用来装载div对应内容) 
function RoundDiv(){ 
    this.content=0;//div内容 
    this.div=0;//div容器 
} 
/**************************************************************************/

Javascript 相关文章推荐
js控制CSS样式属性语法对照表
Dec 11 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 #Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 #Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 #Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 #Javascript
JavaScript Array扩展实现代码
Oct 14 #Javascript
JavaScript 动态创建VML的方法
Oct 14 #Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 #Javascript
You might like
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php获取远程文件大小
2015/10/20 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
简单的php购物车代码
2020/06/05 PHP
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JS继承用法实例分析
2015/02/05 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python调用java的Webservice示例
2014/03/10 Python
对python的输出和输出格式详解
2018/12/08 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
Java程序开发中如何应用线程
2016/03/03 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
聚美优品的广告词
2014/03/14 职场文书
小学课外阅读总结
2014/07/09 职场文书
社区护士演讲稿
2014/08/27 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
终止劳动合同协议书
2014/10/05 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python