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高级程序设计 事件学习笔记
Sep 10 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python实现截屏的函数
2015/07/26 Python
在python里从协程返回一个值的示例
2019/02/19 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python psutil模块使用方法解析
2019/08/01 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
出纳的岗位职责
2013/11/09 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
高二英语教学反思
2014/01/19 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
家长对老师的评语
2014/04/18 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书