代码精简的可以实现元素圆角的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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
发布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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
使用tensorflow实现线性回归
2018/09/08 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
商业活动邀请函
2014/02/04 职场文书
春秋淹城导游词
2015/02/11 职场文书
会议通知
2015/04/15 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
MySQL导致索引失效的几种情况
2022/06/25 MySQL