Javascript 圓角div的實現(xiàn)代碼

更新時間：2009年10月15日 22:55:17 作者：

為什么要做圓角的div：圓角div平滑美觀，某些情況下有比較不錯的效果。比如說要做一個報message的消息框，那么動態(tài)的生成一個圓角div則很有意義。而對html樣式控制的css本身是不直接支持圓角div的。

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

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

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

注意的問題：調(diào)用 getRoundDiv 這個方法需要傳遞一個方法上下文。我的理解是方法上下文相當與一個指針，指向調(diào)用方法的對象。為什么要用這個方法上下文呢？比如要在ie的 creatPopup 方法產(chǎn)生出來的popup文檔內(nèi)新建一個圓角div的話，由于popup只能加載他自己創(chuàng)建的控件，所以可以將popup對象傳遞到方法內(nèi)部，成為方法上下文指向的對象。傳遞上下文的方法有兩種function.call(obj,"arg1","arg2") 類似與這樣。另一種是 function.apply(obj,arguments)

詳細代碼如下：

復制代碼代碼如下:

 
/**************************************************************************/ 
/*RoundDiv.js 產(chǎn)生一個圓角div 
調(diào)用前需設置函數(shù)上下文(上下文是指，要創(chuàng)建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd") 
函數(shù)參數(shù)argBorderStyle: 邊框樣式，字符串 例如 "1px solid black" 
函數(shù)參數(shù)argBgColor: 背景顏色，字符串 例如 "#ffffff" 
現(xiàn)在只支持邊框為1像素 如果超過1像素產(chǎn)生的圖形會比較奇怪 
如果不設置邊框 則沒有邊框 可以正常使用 
本函數(shù)返回的是一個RoundDiv自定義類 
如果要設置div的內(nèi)容請用 obj.Content.innerHtml 或 obj.Content.innerText設置 
如果要設置div的高度請用 obj.Div.style.width obj.Div.style.height設置 
*/ 
/**************************************************************************/ 
/**************************************************************************/ 
//取得一個圓角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") 

    //背景設置 
    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對應內(nèi)容） 
function RoundDiv(){ 
    this.content=0;//div內(nèi)容 
    this.div=0;//div容器 
} 
/**************************************************************************/ 

您可能感興趣的文章:

js實現(xiàn)在頁面上彈出蒙板技巧簡單實用
蒙板是兩個div，其中popWindow樣式的div用于遮住整個頁面并半透明，感興趣的朋友可以參考下哈，希望對你學習js蒙版有所幫助
2013-04-04
JS實現(xiàn)可縮放、拖動、關閉和最小化的浮動窗口完整實例
這篇文章主要介紹了JS實現(xiàn)可縮放、拖動、關閉和最小化的浮動窗口的方法,實例分析了javascript操作窗口層的技巧,需要的朋友可以參考下
2015-03-03
jQuery實現(xiàn)動態(tài)文字搜索功能
本文主要介紹了jQuery實現(xiàn)動態(tài)文字搜索功能的分析過程，文章底部提供了完整的代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
自己實現(xiàn)ajax封裝示例分享
這篇文章主要介紹了自己實現(xiàn)ajax封裝示例,需要的朋友可以參考下
2014-04-04
關于js中的鼠標事件總結(jié)
下面小編就為大家?guī)硪黄P于js中的鼠標事件總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
JavaScript事件冒泡與事件捕獲實例分析
這篇文章主要介紹了JavaScript事件冒泡與事件捕獲,結(jié)合實例形式分析了事件冒泡、阻止冒泡以及事件捕獲的相關原理、操作技巧與注意事項,需要的朋友可以參考下
2018-08-08
js遍歷json的key和value的實例
下面小編就為大家?guī)硪黄猨s遍歷json的key和value的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
javascript一點特殊用法
javascript中函數(shù)的特殊性與普通，對待函數(shù)可以像對待普通變量一樣
2008-05-05
JavaScript實現(xiàn)二叉搜索樹
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)二叉搜索樹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
利用Js的console對象,在控制臺打印調(diào)式信息測試Js的實現(xiàn)
下面小編就為大家?guī)硪黄肑s的console對象,在控制臺打印調(diào)式信息測試Js的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11