Now the realization of rounded corners is generally used to control the picture, this method has its advantages (resulting in a rounded angle smoothing). But at the same time he also asked for a consistent picture, if you want to dynamically change the style of the div is a bit powerless. There is the use of JS to achieve.
The calling code after implementation is as follows
Copy Code code as follows:
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= "This is a rounded div test"
Document.body.appendChild (OBJDIV.DIV);
this creates a rounded div.
Principle of implementation: the principle is very simple, in the div top and bottom plus three lines, with these three lines of different lengths to produce rounded corners effect.
Implementation process: How to achieve these three lines. With <b> this element, set its height to 1px. If you want to display a border, add the left and right boxes to it. After adding a good line, place the content div and the three lines in a container, which is also a div. Finally return a DIV class, this class put two attributes, one is the container div, through this container div can control the shape of the position and size of the height and other attributes. Another property is the content div, through which you can set the content of this div, margin, font color, background color, font size, and so on.
Note the problem: Invoking Getrounddiv This method requires passing a method context. My understanding is that the method context is quite similar to a pointer to the object calling the method. Why do you use this method context? For example, to create a new rounded div within the popup document generated by IE's Creatpopup method, the popup object can be passed inside the method and become the object that the method context points to because the popup can only load the controls that he created. The method of passing the context has two kinds of function.call (obj, "arg1", "arg2") similar to this. The other is function.apply (obj,arguments)
The detailed code is as follows:
Copy Code code as follows:
/**************************************************************************/
/*rounddiv.js produces a rounded div
You need to set the function context (the context is the window where you want to create the div) such as var objdiv = Getrounddiv.call (document, "", #dddddd)
function argument Argborderstyle: Border style, string such as "1px solid black"
function argument argbgcolor: Background color, strings such as "#ffffff"
Now only supports a border of 1 pixels if more than 1 pixel generated graphics will be more strange
If no border is set, no border will work
The function returns a Rounddiv custom class
If you want to set the content of the Div, use obj. content.innerhtml or obj. Content.innertext settings
If you want to set the height of the div, use obj. Div.style.width obj. Div.style.height settings
*/
/**************************************************************************/
/**************************************************************************/
Get a rounded div
function Getrounddiv (argborderstyle,argbgcolor) {
Creating elements
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";
Style settings
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 setting
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"
Control 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-corresponding content)
function Rounddiv () {
This.content=0;//div Content
This.div=0;//div container
}
/**************************************************************************/
