代码精简的可以实现元素圆角的js函数


Posted in Javascript onJuly 21, 2007

上次在blueidea上看到一个元素圆角的实现方法,但是那个太复杂了。于是就自己写了一个函数,可以将元素自动圆角。 
演示地址:http://longbill.cn/down/sample/roundcorner.htm 
不要用在有 padding 值得元素上,最好是在外面套一层。详情见演示地址。 
代码: 
function RoundCorner(obj,style) 

/******** 
网页元素圆角函数!! 
作者: Longbill 
主页: www.longbill.cn 
********/ 
       var r = []; 
       var styles = [ 
       {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]}, 
       {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"]       }, 
       {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]}, 
       {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]} 
       ]; //author: longbill.cn 
       if (!style || style>styles.length) style = 1; 
       style--; 
       var btop = styles[style].top,bbottom = styles[style].bottom; 
       obj = document.getElementById(obj); 
       if (!obj) return; 
       var HTML = obj.innerHTML; 
       obj.innerHTML = ""; 
       for(var istop=1;istop>=0;istop--) 
       { 
              var topborder = document.createElement("b"); 
              topborder.style.display = "block"; 
              topborder.style.height = "2px"; 
              topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF"; 
              for(var i=0;i<btop.length;i++) 
              { 
                     var b = document.createElement("b"); 
                     if (obj.style.backgroundColor) 
                            b.style.backgroundColor = obj.style.backgroundColor; 
                     else if (obj.className) 
                            b.className = obj.className; 
                     b.style.display = "block"; 
                     b.style.margin = (istop)?btop[i]:bbottom[i]; 
                     b.style.height = "1px"; 
                     b.style.overflow = "hidden"; 
                     b.style.width = "auto"; 
                     topborder.appendChild(b); 
              } 
              obj.appendChild(topborder); 
              if (istop) obj.innerHTML+=HTML; 
       } 
}

Javascript 相关文章推荐
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JavaScript类的写法
Sep 17 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 #Javascript
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 #Javascript
javascript实现unicode和字符的互相转换
Jul 18 #Javascript
js实现的网页颜色代码表全集
Jul 17 #Javascript
JTrackBar水平拖动效果
Jul 15 #Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 #Javascript
You might like
php var_export与var_dump 输出的不同
2013/08/09 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
理解javascript回调函数
2014/12/28 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Django实现跨域请求过程详解
2019/07/25 Python
python实现简单银行管理系统
2019/10/25 Python
python如何调用百度识图api
2020/09/29 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
大型营销活动计划书
2014/04/28 职场文书
运动会演讲稿
2014/05/07 职场文书
后进生评语大全
2015/01/04 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
yolov5返回坐标的方法实例
2022/03/17 Python