Javascript 圓角div的實現代碼

現在實現圓角普遍用圖片來控制，這種方法有其優點（產生的圓角平滑）。 但同時他也要求有吻合的圖片，如果要動態改變div的樣式顏色則有些力不從心。還有就是用js來實現。
實現後的調用代碼 如下 複製代碼 代碼如下: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="這是一個圓角div測試"
document.body.appendChild(objDiv.Div);

這樣就產生了一個圓角div
實現原理：原理其實很簡單，在div的top和bottom 加上三條線，用這三條線的不同長度來產生圓角的效果。

實現過程： 如何?這三條線呢。 用<b> 這個元素，將其高度 設定為1px 。如果要顯示邊框則為其添加左邊框和右邊框。添加好線條以後，將內容div 和這三條線放在一個容器裡，這個容器也是一個div。最終返回一個div類，這個類放兩個屬性，一個是容器div，通過這個容器div可以控製圖形出現的位置和大小高度等屬性。另一個屬性是內容div，通過這個div可以設定這個div的內容，margin，字型顏色，背景顏色，字型大小，等屬性。

注意的問題： 調用 getRoundDiv 這個方法需要傳遞一個方法上下文。我的理解是方法上下文相當與一個指標，指向調用方法的對象。為什麼要用這個方法上下文呢？ 比如要在ie的 creatPopup 方法 產生出來的popup文檔內建立一個圓角div的話，由於popup只能載入他自己建立的控制項，所以可以將popup對象傳遞到方法內部，成為方法上下文指向的對象。 傳遞內容相關的方法有兩種function.call(obj,"arg1","arg2") 類似與這樣。 另一種是 function.apply(obj,arguments)

詳細代碼如下： 複製代碼 代碼如下:/**************************************************************************/
/*RoundDiv.js 產生一個圓角div
調用前需設定函數上下文(上下文是指，要建立div的視窗) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd")
函數參數argBorderStyle: 邊框樣式，字串 例如 "1px solid black"
函數參數argBgColor: 背景顏色，字串 例如 "#ffffff"
現在只支援邊框為1像素 如果超過1像素產生的圖形會比較奇怪
如果不設定邊框 則沒有邊框 可以正常使用
本函數返回的是一個RoundDiv自訂類
如果要設定div的內容請用 obj.Content.innerHtml 或 obj.Content.innerText設定
如果要設定div的高度請用 obj.Div.style.width obj.Div.style.height設定
*/
/**************************************************************************/
/**************************************************************************/
//取得一個圓角div
function getRoundDiv(argBorderStyle,argBgColor){

//建立元素
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")

//背景設定
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";

//樣式設定
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";

//高度設定
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";

//邊框設定
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;

//空白間距設定
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;

}
/**************************************************************************/
/**************************************************************************/
//自訂類（用來裝載div對應內容）
function RoundDiv(){
this.content=0;//div內容
this.div=0;//div容器
}
/**************************************************************************/