代码精简的可以实现元素圆角的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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
解决vue-loader加载不上的问题
Oct 21 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
ftp类(myftp.php)
2006/10/09 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python 性能优化技巧总结
2016/11/01 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
申请任职学生会干部自荐书范文
2014/02/13 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
早会开场白台词大全
2015/06/01 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
MySQL 数据库范式化设计理论
2022/04/22 MySQL
nginx之内存池的实现
2022/06/28 Servers
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python