快捷導(dǎo)航

代碼精簡的可以實(shí)現(xiàn)元素圓角的js函數(shù)

更新時(shí)間：2007年07月21日 00:00:00 作者：

上次在blueidea上看到一個(gè)元素圓角的實(shí)現(xiàn)方法，但是那個(gè)太復(fù)雜了。于是就自己寫了一個(gè)函數(shù)，可以將元素自動(dòng)圓角。
演示地址：http://longbill.cn/down/sample/roundcorner.htm
不要用在有 padding 值得元素上，最好是在外面套一層。詳情見演示地址。
代碼：
function RoundCorner(obj,style)
{
/********
網(wǎng)頁元素圓角函數(shù)!!
作者: 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;
       }
}

您可能感興趣的文章:

代碼精簡的可以實(shí)現(xiàn)元素圓角的js函數(shù)

相關(guān)文章

JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（四） ECMAScript中的類型轉(zhuǎn)換
ECMAScript中的類型轉(zhuǎn)換，學(xué)習(xí)js的朋友可以看看
2012-02-02
前端使用axios實(shí)現(xiàn)下載文件功能的詳細(xì)過程
項(xiàng)目中經(jīng)常會(huì)遇到需要導(dǎo)出列表內(nèi)容,或者下載文件之類的需求,下面這篇文章主要給大家介紹了關(guān)于前端使用axios實(shí)現(xiàn)下載文件功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
iframe的onload在Chrome/Opera中執(zhí)行兩次Bug的解決方法
創(chuàng)建iframe對象，添加load事件，再將iframe添加到body中。Chrome/Opera中會(huì)造成load事件的handler執(zhí)行兩次。
2011-03-03
node在兩個(gè)div之間移動(dòng),用ztree實(shí)現(xiàn)
本文介紹了“node在兩個(gè)div之間移動(dòng),用ztree實(shí)現(xiàn)”的方法，需要的朋友可以參考一下
2013-03-03
JS實(shí)現(xiàn)網(wǎng)頁滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法,實(shí)例分析了javascript針對鼠標(biāo)事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接
這篇文章主要介紹了Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接的相關(guān)資料,需要的朋友可以參考下
2015-12-12
JavaScript高階API數(shù)組reduce函數(shù)使用示例
這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
Javascript實(shí)現(xiàn)關(guān)聯(lián)數(shù)據(jù)(Linked Data)查詢及注意細(xì)節(jié)
DBpedia對Wikipedia的數(shù)據(jù)變成Linked Data形式，使得機(jī)器也能讀懂并自由獲得這些數(shù)據(jù);本文的主要目的是利用Javascript從DBpedia中獲取我們想要的數(shù)據(jù),感興趣的朋友可以參考下，希望可以幫助到你
2013-02-02
uni-app實(shí)現(xiàn)全局變量的方式小結(jié)
uni-app是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到 iOS、Android、Web（響應(yīng)式）、以及各種小程序,下面我們就來看看uni-app實(shí)現(xiàn)全局變量有哪些方法吧
2024-12-12