代码精简的可以实现元素圆角的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 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
解决vue中provide inject的响应式监听
Apr 19 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
vuex实现简易计数器
2016/10/27 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
浅析使用Python操作文件
2017/07/31 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Pygame的程序开始示例代码
2020/05/07 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
2015年个人审计工作总结
2015/04/07 职场文书
旗帜观后感
2015/06/08 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书