Javascript rounded div implementation code _ javascript skills

Why do you want to make a div with rounded corners: The div with rounded corners is smooth and beautiful, which has a good effect in some cases. For example, to create a message box for message reporting, it makes sense to dynamically generate a rounded div. Css that controls html styles does not directly support corner 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 asked for matching images. If you want to dynamically change the style color of p, it is a little powerless. In addition, js is used for implementation.
The call code after implementation is as follows:

The 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 corner p test"
Document. body. appendChild (objDiv. Div );

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

Implementation process: how to implement these three lines. Use This element sets its height to 1px. If you want to display a border, add the left and right borders to it. After adding lines, put the content p and the three lines in a container, which is also a p. Finally, a p class is returned. This class has two attributes: Container p, which controls the position, size, and height of the image. Another attribute is content p. You can set the content, margin, font color, background color, font size, and other attributes of this p.

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 corner p 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:

The Code is as follows:

/*************************************** ***********************************/
/* RoundDiv. js generates a rounded corner p
You need to set the function context before calling (the context refers to the window for creating p), 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.
Use obj. Content. innerHtml or obj. Content. innerText to set p Content.
To set the height of p, use obj. Div. style. width obj. Div. style. height.
*/
/*************************************** ***********************************/
/*************************************** ***********************************/
// Get a rounded corner p
Function getRoundDiv (argBorderStyle, argBgColor ){

// Create Element
Var pPane = this. createElement ("p ")
Var pContent = this. createElement ("p ")
Var pContentMax = this. createElement ("p ")
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
PPane. style. backgroundColor = argBgColor;
PContent. style. backgroundColor = argBgColor;
PContentMax. 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
PContent. style. height = "100% ";
PContentMax. 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
PContentMax. style. borderLeft = argBorderStyle
PContentMax. 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 );

PContentMax. appendChild (pContent)
PPane. appendChild (bTop)
PPane. appendChild (pContentMax)
PPane. appendChild (bBottom)
Var objRoundDiv = new RoundDiv ();
ObjRoundDiv. Div = pPane;
ObjRoundDiv. Content = pContent;
Return objRoundDiv;

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