首页 >> JavaScript >> Js脚本特效 >> js实现(层,表格)元素圆角的函数

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

作者:Longbill 来源:Longbill's Blog 时间:2008-1-1 网友评论条【大中小】

上次在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="http://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.cn if (!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> [提示：你可先修改部分代码，再按运行]

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/javascript/jsmagic/20081/26411.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

闽ICP备06017341号

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

Aspxhome.com. 中国Asp之家. 版权所有