Javascript 圓角div的實(shí)現(xiàn)代碼
更新時(shí)間:2009年10月15日 22:55:17 作者:
為什么要做圓角的div: 圓角div平滑美觀,某些情況下有比較不錯(cuò)的效果。比如說(shuō)要做一個(gè)報(bào)message的消息框,那么動(dòng)態(tài)的生成一個(gè)圓角div則很有意義。而對(duì)html樣式控制的css本身是不直接支持圓角div的。
現(xiàn)在實(shí)現(xiàn)圓角普遍用圖片來(lái)控制,這種方法有其優(yōu)點(diǎn)(產(chǎn)生的圓角平滑)。 但同時(shí)他也要求有吻合的圖片,如果要?jiǎng)討B(tài)的改變div的樣式顏色則有些力不從心。還有就是用js來(lái)實(shí)現(xiàn)。
實(shí)現(xiàn)后的調(diào)用代碼 如下
var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")
objDiv.Div.style.width="100px";
objDiv.Content.style.margin="6 6 6 6 "
objDiv.Content.innerText="這是一個(gè)圓角div測(cè)試"
document.body.appendChild(objDiv.Div);

這樣就產(chǎn)生了一個(gè)圓角div
實(shí)現(xiàn)原理:原理其實(shí)很簡(jiǎn)單,在div的top和bottom 加上三條線,用這三條線的不同長(zhǎng)度來(lái)產(chǎn)生圓角的效果。
實(shí)現(xiàn)過(guò)程: 如何實(shí)現(xiàn)這三條線呢。 用<b> 這個(gè)元素,將其高度 設(shè)置為1px 。如果要顯示邊框則為其添加左邊框和右邊框。添加好線條以后,將內(nèi)容div 和這三條線放在一個(gè)容器里,這個(gè)容器也是一個(gè)div。最終返回一個(gè)div類,這個(gè)類放兩個(gè)屬性,一個(gè)是容器div,通過(guò)這個(gè)容器div可以控制圖形出現(xiàn)的位置和大小高度等屬性。另一個(gè)屬性是內(nèi)容div,通過(guò)這個(gè)div可以設(shè)置這個(gè)div的內(nèi)容,margin,字體顏色,背景顏色,字體大小,等屬性。
注意的問(wèn)題: 調(diào)用 getRoundDiv 這個(gè)方法需要傳遞一個(gè)方法上下文。我的理解是方法上下文相當(dāng)與一個(gè)指針,指向調(diào)用方法的對(duì)象。為什么要用這個(gè)方法上下文呢? 比如要在ie的 creatPopup 方法 產(chǎn)生出來(lái)的popup文檔內(nèi)新建一個(gè)圓角div的話,由于popup只能加載他自己創(chuàng)建的控件,所以可以將popup對(duì)象傳遞到方法內(nèi)部,成為方法上下文指向的對(duì)象。 傳遞上下文的方法有兩種function.call(obj,"arg1","arg2") 類似與這樣。 另一種是 function.apply(obj,arguments)
詳細(xì)代碼如下:
/**************************************************************************/
/*RoundDiv.js 產(chǎn)生一個(gè)圓角div
調(diào)用前需設(shè)置函數(shù)上下文(上下文是指,要?jiǎng)?chuàng)建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd")
函數(shù)參數(shù)argBorderStyle: 邊框樣式,字符串 例如 "1px solid black"
函數(shù)參數(shù)argBgColor: 背景顏色,字符串 例如 "#ffffff"
現(xiàn)在只支持邊框?yàn)?像素 如果超過(guò)1像素產(chǎn)生的圖形會(huì)比較奇怪
如果不設(shè)置邊框 則沒(méi)有邊框 可以正常使用
本函數(shù)返回的是一個(gè)RoundDiv自定義類
如果要設(shè)置div的內(nèi)容請(qǐng)用 obj.Content.innerHtml 或 obj.Content.innerText設(shè)置
如果要設(shè)置div的高度請(qǐng)用 obj.Div.style.width obj.Div.style.height設(shè)置
*/
/**************************************************************************/
/**************************************************************************/
//取得一個(gè)圓角div
function getRoundDiv(argBorderStyle,argBgColor){
//創(chuàng)建元素
var divPane =this.createElement("div")
var divContent =this.createElement("div")
var divContentMax =this.createElement("div")
var bTop =this.createElement("b")
var bBottom =this.createElement("b")
var bTop1 =this.createElement("b")
var bTop2 =this.createElement("b")
var bTop3 =this.createElement("b")
var bTop4 =this.createElement("b")
var bBottom1 =this.createElement("b")
var bBottom2 =this.createElement("b")
var bBottom3 =this.createElement("b")
var bBottom4 =this.createElement("b")
//背景設(shè)置
divPane.style.backgroundColor=argBgColor;
divContent.style.backgroundColor=argBgColor;
divContentMax.style.backgroundColor=argBgColor;
bTop1.style.backgroundColor=argBgColor;
bTop2.style.backgroundColor=argBgColor;
bTop3.style.backgroundColor=argBgColor;
bTop4.style.backgroundColor=argBgColor;
bBottom1.style.backgroundColor=argBgColor;
bBottom2.style.backgroundColor=argBgColor;
bBottom3.style.backgroundColor=argBgColor;
bBottom4.style.backgroundColor=argBgColor;
bTop.style.backgroundColor="#ffffff";
bBottom.style.backgroundColor="#ffffff";
//樣式設(shè)置
bTop.style.overflow="hidden";
bBottom.style.overflow="hidden";
bTop1.style.overflow="hidden";
bTop2.style.overflow="hidden";
bTop3.style.overflow="hidden";
bTop4.style.overflow="hidden";
bBottom1.style.overflow="hidden";
bBottom2.style.overflow="hidden";
bBottom3.style.overflow="hidden";
bBottom4.style.overflow="hidden";
bTop.style.display="block";
bBottom.style.display="block";
bTop1.style.display="block";
bTop2.style.display="block";
bTop3.style.display="block";
bTop4.style.display="block";
bBottom1.style.display="block";
bBottom2.style.display="block";
bBottom3.style.display="block";
bBottom4.style.display="block";
//高度設(shè)置
divContent.style.height="100%";
divContentMax.style.height="100%";
bTop1.style.height="1px";
bTop2.style.height="1px";
bTop3.style.height="1px";
bTop4.style.height="2px";
bBottom1.style.height="1px";
bBottom2.style.height="1px";
bBottom3.style.height="1px";
bBottom4.style.height="2px";
//邊框設(shè)置
divContentMax.style.borderLeft=argBorderStyle
divContentMax.style.borderRight=argBorderStyle
bTop1.style.borderLeft=argBorderStyle;
bTop1.style.borderRight=argBorderStyle;
bTop1.style.borderTop=argBorderStyle;
bTop2.style.borderLeft=argBorderStyle;
bTop2.style.borderRight=argBorderStyle;
bTop3.style.borderLeft=argBorderStyle;
bTop3.style.borderRight=argBorderStyle;
bTop4.style.borderRight=argBorderStyle;
bTop4.style.borderLeft=argBorderStyle;
bBottom1.style.borderLeft=argBorderStyle;
bBottom1.style.borderRight=argBorderStyle;
bBottom1.style.borderTop=argBorderStyle;
bBottom2.style.borderLeft=argBorderStyle;
bBottom2.style.borderRight=argBorderStyle;
bBottom3.style.borderLeft=argBorderStyle;
bBottom3.style.borderRight=argBorderStyle;
bBottom4.style.borderLeft=argBorderStyle;
bBottom4.style.borderRight=argBorderStyle;
//空白間距設(shè)置
bTop1.style.margin="0 4px 0 4px"
bTop2.style.margin="0 3px 0 3px"
bTop3.style.margin="0 2px 0 2px"
bTop4.style.margin="0 1px 0 1px"
bBottom1.style.margin="0 4px 0 4px"
bBottom2.style.margin="0 3px 0 3px"
bBottom3.style.margin="0 2px 0 2px"
bBottom4.style.margin="0 1px 0 1px"
//控件拼裝
bTop.appendChild(bTop1);
bTop.appendChild(bTop1);
bTop.appendChild(bTop2);
bTop.appendChild(bTop3);
bTop.appendChild(bTop4);
bBottom.appendChild(bBottom4);
bBottom.appendChild(bBottom3);
bBottom.appendChild(bBottom2);
bBottom.appendChild(bBottom1);
divContentMax.appendChild(divContent)
divPane.appendChild(bTop)
divPane.appendChild(divContentMax)
divPane.appendChild(bBottom)
var objRoundDiv = new RoundDiv();
objRoundDiv.Div=divPane;
objRoundDiv.Content=divContent;
return objRoundDiv;
}
/**************************************************************************/
/**************************************************************************/
//自定義類(用來(lái)裝載div對(duì)應(yīng)內(nèi)容)
function RoundDiv(){
this.content=0;//div內(nèi)容
this.div=0;//div容器
}
/**************************************************************************/
實(shí)現(xiàn)后的調(diào)用代碼 如下
復(fù)制代碼 代碼如下:
var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")
objDiv.Div.style.width="100px";
objDiv.Content.style.margin="6 6 6 6 "
objDiv.Content.innerText="這是一個(gè)圓角div測(cè)試"
document.body.appendChild(objDiv.Div);
這樣就產(chǎn)生了一個(gè)圓角div
實(shí)現(xiàn)原理:原理其實(shí)很簡(jiǎn)單,在div的top和bottom 加上三條線,用這三條線的不同長(zhǎng)度來(lái)產(chǎn)生圓角的效果。
實(shí)現(xiàn)過(guò)程: 如何實(shí)現(xiàn)這三條線呢。 用<b> 這個(gè)元素,將其高度 設(shè)置為1px 。如果要顯示邊框則為其添加左邊框和右邊框。添加好線條以后,將內(nèi)容div 和這三條線放在一個(gè)容器里,這個(gè)容器也是一個(gè)div。最終返回一個(gè)div類,這個(gè)類放兩個(gè)屬性,一個(gè)是容器div,通過(guò)這個(gè)容器div可以控制圖形出現(xiàn)的位置和大小高度等屬性。另一個(gè)屬性是內(nèi)容div,通過(guò)這個(gè)div可以設(shè)置這個(gè)div的內(nèi)容,margin,字體顏色,背景顏色,字體大小,等屬性。
注意的問(wèn)題: 調(diào)用 getRoundDiv 這個(gè)方法需要傳遞一個(gè)方法上下文。我的理解是方法上下文相當(dāng)與一個(gè)指針,指向調(diào)用方法的對(duì)象。為什么要用這個(gè)方法上下文呢? 比如要在ie的 creatPopup 方法 產(chǎn)生出來(lái)的popup文檔內(nèi)新建一個(gè)圓角div的話,由于popup只能加載他自己創(chuàng)建的控件,所以可以將popup對(duì)象傳遞到方法內(nèi)部,成為方法上下文指向的對(duì)象。 傳遞上下文的方法有兩種function.call(obj,"arg1","arg2") 類似與這樣。 另一種是 function.apply(obj,arguments)
詳細(xì)代碼如下:
復(fù)制代碼 代碼如下:
/**************************************************************************/
/*RoundDiv.js 產(chǎn)生一個(gè)圓角div
調(diào)用前需設(shè)置函數(shù)上下文(上下文是指,要?jiǎng)?chuàng)建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd")
函數(shù)參數(shù)argBorderStyle: 邊框樣式,字符串 例如 "1px solid black"
函數(shù)參數(shù)argBgColor: 背景顏色,字符串 例如 "#ffffff"
現(xiàn)在只支持邊框?yàn)?像素 如果超過(guò)1像素產(chǎn)生的圖形會(huì)比較奇怪
如果不設(shè)置邊框 則沒(méi)有邊框 可以正常使用
本函數(shù)返回的是一個(gè)RoundDiv自定義類
如果要設(shè)置div的內(nèi)容請(qǐng)用 obj.Content.innerHtml 或 obj.Content.innerText設(shè)置
如果要設(shè)置div的高度請(qǐng)用 obj.Div.style.width obj.Div.style.height設(shè)置
*/
/**************************************************************************/
/**************************************************************************/
//取得一個(gè)圓角div
function getRoundDiv(argBorderStyle,argBgColor){
//創(chuàng)建元素
var divPane =this.createElement("div")
var divContent =this.createElement("div")
var divContentMax =this.createElement("div")
var bTop =this.createElement("b")
var bBottom =this.createElement("b")
var bTop1 =this.createElement("b")
var bTop2 =this.createElement("b")
var bTop3 =this.createElement("b")
var bTop4 =this.createElement("b")
var bBottom1 =this.createElement("b")
var bBottom2 =this.createElement("b")
var bBottom3 =this.createElement("b")
var bBottom4 =this.createElement("b")
//背景設(shè)置
divPane.style.backgroundColor=argBgColor;
divContent.style.backgroundColor=argBgColor;
divContentMax.style.backgroundColor=argBgColor;
bTop1.style.backgroundColor=argBgColor;
bTop2.style.backgroundColor=argBgColor;
bTop3.style.backgroundColor=argBgColor;
bTop4.style.backgroundColor=argBgColor;
bBottom1.style.backgroundColor=argBgColor;
bBottom2.style.backgroundColor=argBgColor;
bBottom3.style.backgroundColor=argBgColor;
bBottom4.style.backgroundColor=argBgColor;
bTop.style.backgroundColor="#ffffff";
bBottom.style.backgroundColor="#ffffff";
//樣式設(shè)置
bTop.style.overflow="hidden";
bBottom.style.overflow="hidden";
bTop1.style.overflow="hidden";
bTop2.style.overflow="hidden";
bTop3.style.overflow="hidden";
bTop4.style.overflow="hidden";
bBottom1.style.overflow="hidden";
bBottom2.style.overflow="hidden";
bBottom3.style.overflow="hidden";
bBottom4.style.overflow="hidden";
bTop.style.display="block";
bBottom.style.display="block";
bTop1.style.display="block";
bTop2.style.display="block";
bTop3.style.display="block";
bTop4.style.display="block";
bBottom1.style.display="block";
bBottom2.style.display="block";
bBottom3.style.display="block";
bBottom4.style.display="block";
//高度設(shè)置
divContent.style.height="100%";
divContentMax.style.height="100%";
bTop1.style.height="1px";
bTop2.style.height="1px";
bTop3.style.height="1px";
bTop4.style.height="2px";
bBottom1.style.height="1px";
bBottom2.style.height="1px";
bBottom3.style.height="1px";
bBottom4.style.height="2px";
//邊框設(shè)置
divContentMax.style.borderLeft=argBorderStyle
divContentMax.style.borderRight=argBorderStyle
bTop1.style.borderLeft=argBorderStyle;
bTop1.style.borderRight=argBorderStyle;
bTop1.style.borderTop=argBorderStyle;
bTop2.style.borderLeft=argBorderStyle;
bTop2.style.borderRight=argBorderStyle;
bTop3.style.borderLeft=argBorderStyle;
bTop3.style.borderRight=argBorderStyle;
bTop4.style.borderRight=argBorderStyle;
bTop4.style.borderLeft=argBorderStyle;
bBottom1.style.borderLeft=argBorderStyle;
bBottom1.style.borderRight=argBorderStyle;
bBottom1.style.borderTop=argBorderStyle;
bBottom2.style.borderLeft=argBorderStyle;
bBottom2.style.borderRight=argBorderStyle;
bBottom3.style.borderLeft=argBorderStyle;
bBottom3.style.borderRight=argBorderStyle;
bBottom4.style.borderLeft=argBorderStyle;
bBottom4.style.borderRight=argBorderStyle;
//空白間距設(shè)置
bTop1.style.margin="0 4px 0 4px"
bTop2.style.margin="0 3px 0 3px"
bTop3.style.margin="0 2px 0 2px"
bTop4.style.margin="0 1px 0 1px"
bBottom1.style.margin="0 4px 0 4px"
bBottom2.style.margin="0 3px 0 3px"
bBottom3.style.margin="0 2px 0 2px"
bBottom4.style.margin="0 1px 0 1px"
//控件拼裝
bTop.appendChild(bTop1);
bTop.appendChild(bTop1);
bTop.appendChild(bTop2);
bTop.appendChild(bTop3);
bTop.appendChild(bTop4);
bBottom.appendChild(bBottom4);
bBottom.appendChild(bBottom3);
bBottom.appendChild(bBottom2);
bBottom.appendChild(bBottom1);
divContentMax.appendChild(divContent)
divPane.appendChild(bTop)
divPane.appendChild(divContentMax)
divPane.appendChild(bBottom)
var objRoundDiv = new RoundDiv();
objRoundDiv.Div=divPane;
objRoundDiv.Content=divContent;
return objRoundDiv;
}
/**************************************************************************/
/**************************************************************************/
//自定義類(用來(lái)裝載div對(duì)應(yīng)內(nèi)容)
function RoundDiv(){
this.content=0;//div內(nèi)容
this.div=0;//div容器
}
/**************************************************************************/
相關(guān)文章
js中幾種循環(huán)的退出方式實(shí)例總結(jié)
提到在一段程序中如果碰到需要終止,結(jié)束一個(gè)循環(huán),函數(shù)或者一段代碼,一般會(huì)想到以下這幾個(gè)關(guān)鍵字return、continue、break,這篇文章主要給大家介紹了關(guān)于js中幾種循環(huán)的退出方式,需要的朋友可以參考下2022-12-12layui關(guān)閉層級(jí)、簡(jiǎn)單監(jiān)聽(tīng)的實(shí)例
今天小編就為大家分享一篇layui關(guān)閉層級(jí)、簡(jiǎn)單監(jiān)聽(tīng)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行和旋轉(zhuǎn)平移等功能
之前小編和大家分享了SVG中如何配合使用text和tspan來(lái)實(shí)現(xiàn)換行的功能,所以這篇文章對(duì)此功能進(jìn)行一下封裝,以后就可以直接用了。有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-10-10JS擴(kuò)展String.prototype.format字符串拼接的功能
這篇文章主要介紹了JS擴(kuò)展String.prototype.format字符串拼接的功能,需要的朋友可以參考下2018-03-03如何用JS實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)監(jiān)聽(tīng)
這篇文章主要介紹了如何用JS實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)監(jiān)聽(tīng),對(duì)數(shù)據(jù)監(jiān)聽(tīng)感興趣的同學(xué),可以參考一下2021-05-05js 中文漢字轉(zhuǎn)Unicode、Unicode轉(zhuǎn)中文漢字、ASCII轉(zhuǎn)換Unicode、Unicode轉(zhuǎn)換AS
這篇文章主要介紹了js 中文漢字轉(zhuǎn)Unicode、Unicode轉(zhuǎn)中文漢字、ASCII轉(zhuǎn)換Unicode、Unicode轉(zhuǎn)換ASCII、中文轉(zhuǎn)換XXX,需要的朋友可以參考下2016-12-12