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 相关文章推荐
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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版(1)
2006/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python实现控制COM口的示例
2019/07/03 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
如何写python的配置文件
2020/06/07 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Python创建自己的加密货币的示例
2021/03/01 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
10的分与合教学反思
2014/04/30 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
战略合作意向书
2014/07/29 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA