Javascript 丸め div 実装コード_JavaScript スキル

現在、角の丸みは画像によって制御されることが一般的ですが、この方法には利点があります (結果として角が丸くなるのは滑らかです)。 しかし同時に、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 の上部と下部に 3 行を追加し、これら 3 行の異なる長さを使用して、丸い角の効果。

実装プロセス: これら 3 行を実装する方法。 要素を使用し、その高さを 1px に設定します。枠線を表示したい場合は、左右の枠線を追加します。行を追加した後、コンテンツ div とこれら 3 行をコンテナーに配置します。このコンテナーも div です。最後に、div クラスが返されます。このクラスには 2 つの属性が含まれています。1 つはコンテナ div で、グラフィックスの位置、サイズ、高さなどの属性を制御できます。もう 1 つの属性はコンテンツ div で、この div のコンテンツ、マージン、フォントの色、背景色、フォント サイズ、およびその他の属性を設定できます。

注: getRoundDiv メソッドを呼び出すには、メソッド コンテキストを渡す必要があります。私の理解では、メソッドコンテキストは、メソッドが呼び出されるオブジェクトを指すポインタに相当します。なぜこのメソッドコンテキストを使用するのでしょうか? たとえば、IE の creatPopup メソッドによって生成されたポップアップ ドキュメント内に新しい丸みを帯びた div を作成する場合、ポップアップはそれ自体で作成されたコントロールのみを読み込むことができるため、ポップアップ オブジェクトをメソッドに渡して、メソッドコンテキスト。 これに似たコンテキスト function.call(obj,"arg1","arg2") を渡す方法が 2 つあります。 もう 1 つは 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 RoundD iv();
objRoundDiv.Div=divPane;
objRoundDiv.Content=divContent;
objRoundDiv を返します。

}
/************************************************* ************************/
/************************************************* ************************/
//自定义类（用来装ダウンロードdiv对应内容）
関数 RoundDiv (){
this.content=0;//div 内容
this.div=0;//div 容器
}
/************************************************* ************************/