html控制圆角的函数,代码精简的可以实现元素圆角的js函数

代码精简的可以实现元素圆角的js函数

更新时间：2007年07月21日 00:00:00   作者：

上次在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

{

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接收键盘指令示例，按下键盘上不同的键，程序会跳转到不同的网页，本例中按下A键程序为跳转到脚本之家的首页，实现按键跳转的功能。2009-10-10

这篇文章主要介绍了查找页面中所有类为test结点的方法,需要的朋友可以参考下2014-03-03

下面小编就为大家带来一篇仿百度换肤功能的简单实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07

这篇文章主要为大家分享了js滑动提示效果代码，实现方法简单，感兴趣的小伙伴们可以参考一下2016-03-03

下面小编就为大家带来一篇js匿名函数作为函数参数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06

这篇文章主要介绍了JavaScript页面倒计时功能,结合完整实例形式分析了javascript计时器、时间运算相关操作技巧,需要的朋友可以参考下2019-05-05

这篇文章主要介绍了JS实现点击复选框将按钮或文本框变为灰色不可用的方法,涉及javascript动态修改页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08

这篇文章主要介绍了js 对象使用的小技巧,结合实例形式分析了JavaScript对象的遍历、查找、事件监听等相关操作技巧,需要的朋友可以参考下2019-11-11

本篇文章主要介绍了js循环改变div颜色具体方法，需要的朋友可以参考一下2013-06-06

连连看游戏通常情况下都是使用html5来实现的，不过从现在开始就可以使用js来实现了，具体的代码如下，喜欢的朋友可以参考下，希望对大家有所帮助2013-09-09

最新评论