Implementation Code of Javascript rounded div

Currently, images are generally used to control rounded corners. This method has its advantages (resulting in smooth rounded corners ). But at the same time, he also requires matching images. If you want to dynamically change the style color of the div, it will not work. In addition, js is used for implementation.
The call code after implementation is as follows:
Copy codeThe Code is as follows:
Var objDiv = getRoundDiv. call (document, "solid 1px yellow", "# dddddddd ")
ObjDiv. Div. style. width = "100px ";
ObjDiv. Content. style. margin = "6 6 6 6"
ObjDiv. Content. innerText = "this is a rounded div test"
Document. body. appendChild (objDiv. Div );


In this way, a rounded div is generated.
Implementation principle: the principle is actually very simple. Add three lines to the top and bottom of the div, and use different lengths of the three lines to produce the effect of rounded corners.

Implementation process: how to implement these three lines. Use the <B> element to set its height to 1px. If you want to display a border, add the left and right borders to it. After adding lines, place the content div and the three lines in a container, which is also a div. Finally, a div class is returned. This class has two attributes. One is the container div, which can be used to control the position, size, and height of the image. Another property is the content div. You can set the content, margin, font color, background color, font size, and other attributes of this div.

Note: To Call The getRoundDiv method, you must pass a method context. In my understanding, the method context is equivalent to a pointer pointing to the object that calls the method. Why the context of this method? For example, to create a rounded div in the popup document generated by the creatPopup method of ie, since popup can only load the control created by itself, you can pass the popup object to the method, the object to which the method context points. There are two methods for passing context: function. call (obj, "arg1", "arg2. The other is function. apply (obj, arguments)

The Code is as follows:
Copy codeThe Code is as follows:
/*************************************** ***********************************/
/* RoundDiv. js generates a rounded div
You need to set the function context before calling (context refers to the window for creating a div), for example, var objDiv = getRoundDiv. call (document, "", "# dddddddd ")
Function parameter argBorderStyle: border style, string for example, "1px solid black"
Function parameter argBgColor: Specifies the background color, for example, "# ffffff"
Currently, only one pixel border is supported. If the number of images generated by more than one pixel is strange
If no border is set, no border can be used normally.
This function returns a RoundDiv custom class.
To set the div Content, use obj. Content. innerHtml or obj. Content. innerText.
To set the div height, use obj. Div. style. width obj. Div. style. height.
*/
/*************************************** ***********************************/
/*************************************** ***********************************/
// Obtain a rounded div
Function getRoundDiv (argBorderStyle, argBgColor ){

// Create Element
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 ")

// Background settings
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 ";

// Set the style
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 ";


// Height settings
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 ";


// Border settings
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;


// Blank spacing settings
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"

// Widget assembly
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;

}
/*************************************** ***********************************/
/*************************************** ***********************************/
// Custom class (used to load div content)
Function RoundDiv (){
This. content = 0; // div content
This. div = 0; // div container
}
/*************************************** ***********************************/