js实现(层,表格)元素圆角的函数

作者：Longbill 来源：Longbill's Blog 时间：2008-01-01 16:40:00　

上次在blueidea上看到一个元素圆角的实现方法，但是那个太复杂了。于是就自己写了一个函数，可以将元素自动圆角，如div层，表格等。

共有四种圆角样式：

不要用在有 padding 值得元素上，最好是在外面套一层。详情见演示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><title>js实现(层,表格)元素圆角的函数 - asp之家</title><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE>BODY {FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center}.round {DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue}</STYLE><META content="MSHTML 6.00.2900.3243" name=GENERATOR></HEAD><BODY><DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf"><DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数<BR>回到:<A href="https://www.aspxhome.com/" target=_blank>asp之家首页</A> </DIV></DIV><DIV class=round id=round1><DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1</DIV></DIV><DIV class=round id=round2><DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2</DIV></DIV><BR><DIV class=round id=round3><DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3</DIV></DIV><DIV class=round id=round4><DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4</DIV></DIV><DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf"><DIV style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:<BR>RoundCorner("欲圆角的元素ID" [, 圆角样式 ]);<BR>圆角样式:可选参数,暂时有4种 </DIV></DIV><SCRIPT>RoundCorner("round1",1);RoundCorner("round2",2);RoundCorner("round3",3);RoundCorner("round4",4);RoundCorner("a",1);RoundCorner("title",1);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.cnif (!style || style>styles.length) style = 1;style--;var btop = styles[style].top,bbottom = styles[style].bottom;if (typeof obj == "string") obj = document.getElementById(obj);var objp = obj.parentNode;if (!obj || !objp) return;var bg = '';var cssProperty = "backgroundColor";var mozillaEquivalentCSS = "background-color";if (objp.currentStyle)var actualColor = objp.currentStyle[cssProperty];else{var cs = document.defaultView.getComputedStyle(objp, null);var actualColor = cs.getPropertyValue(mozillaEquivalentCSS);}if (actualColor == "transparent" && objp.parentNode) bg = arguments.callee(objp.parentNode);else if (actualColor == null) bg = "#ffffff";else bg = actualColor;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 = bg;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;}}</SCRIPT></BODY></HTML>

标签：圆角,函数,表格,js

投稿

js实现(层,表格)元素圆角的函数

猜你喜欢

Vite引入虚拟文件的实现

详解Python下ftp上传文件linux服务器

python实现密码验证合格程序的思路详解

SQL Server 数据库实用SQL语句

python3.6使用tkinter实现弹跳小球游戏

Access 导入 MSSQL 2000/2005 数据库工具

Python实现获取nginx服务器ip及流量统计信息功能示例

Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】

pytorch常用数据类型所占字节数对照表一览

Django中对数据查询结果进行排序的方法

bootstrapvalidator之API学习教程

Python实战之基于OpenCV的美颜挂件制作

vue实现百度搜索下拉提示功能实例

基于Python实现简易学生信息管理系统

从语义开始–概念、意义、实践

MySQL SQL语句优化的10条建议

Python实现个人微信号自动监控告警的示例

Python使用Dijkstra算法实现求解图中最短路径距离问题详解

python版本的读写锁操作方法

解决Python 遍历字典时删除元素报异常的问题