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禁用浏览器退格键实现思路及代码
Oct 29 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
js倒计时简单实现方法
Dec 17 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
js调用flash的效果代码
2008/04/26 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript 面向对象继承
2009/11/26 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python自动登录126邮箱的方法
2015/07/10 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python生成数字图片代码分享
2017/10/31 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
init进程的作用
2015/08/20 面试题
2014迎国庆演讲稿
2014/09/19 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
实验心得体会范文
2016/01/25 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server