Detaillierte Erläuterung des Implementierungsprinzips und des Prozesscodes von Javascript Rounded Div

Heutzutage werden die abgerundeten Ecken im Allgemeinen durch Bilder kontrolliert. Diese Methode hat ihre Vorteile (die resultierenden abgerundeten Ecken sind glatt). Gleichzeitig benötigt er aber auch passende Bilder. Wenn er den Stil und die Farbe von p dynamisch ändern möchte, wird es etwas schwierig. Es gibt auch die Verwendung von js, um dies zu erreichen.

Der aufrufende Code nach der Implementierung lautet wie folgt

var objp = getRoundp.call(document,"solid 1px yellow","#dddddd") 
objp.p.style.width="100px"; 
objp.Content.style.margin="6 6 6 6 " 
objp.Content.innerText="这是一个圆角p测试" 
document.body.appendChild(objp.p);

Dies erzeugt ein abgerundetes p
Implementierungsprinzip: Das Prinzip ist eigentlich sehr einfach. Fügen Sie oben und unten an p drei Linien hinzu und nutzen Sie die unterschiedlichen Längen dieser drei Linien, um einen abgerundeten Eckeneffekt zu erzielen.
Implementierungsprozess: So implementieren Sie diese drei Zeilen. Verwenden Sie das Element und legen Sie seine Höhe auf 1 Pixel fest. Wenn Sie Ränder anzeigen möchten, fügen Sie ihnen linke und rechte Ränder hinzu. Fügen Sie nach dem Hinzufügen der Zeilen den Inhalt p und diese drei Zeilen in einen Container ein, der ebenfalls ein p ist. Schließlich wird eine p-Klasse zurückgegeben. Eines davon ist der Container p. Über diesen Container können Position, Größe und Höhe der Grafiken gesteuert werden. Ein weiteres Attribut ist der Inhalt p. Über dieses p können Sie den Inhalt, den Rand, die Schriftfarbe, die Hintergrundfarbe, die Schriftgröße und andere Attribute dieses p festlegen.
Hinweis: Der Aufruf der getRoundp-Methode erfordert die Übergabe eines Methodenkontexts. Nach meinem Verständnis entspricht der Methodenkontext einem Zeiger, der auf das Objekt zeigt, für das die Methode aufgerufen wird. Warum diesen Methodenkontext verwenden? Wenn Sie beispielsweise ein neues abgerundetes p in dem von der IE-Methode creatPopup generierten Popup-Dokument erstellen möchten, kann das Popup-Objekt an die Methode übergeben werden und zu dem Objekt werden, auf das das Popup zeigt, da das Popup nur von ihm selbst erstellte Steuerelemente laden kann Methodenkontext. Es gibt zwei ähnliche Methoden zum Übergeben des Kontexts function.call(obj,"arg1", "arg2"). Das andere ist function.apply(obj,arguments)
Der detaillierte Code lautet wie folgt:

/**************************************************************************/ 
/*Roundp.js 产生一个圆角p 
调用前需设置函数上下文(上下文是指，要创建p的窗口) 例如 var objp = getRoundp.call(document,"","#dddddd") 
函数参数argBorderStyle: 边框样式，字符串 例如 "1px solid black" 
函数参数argBgColor: 背景颜色，字符串 例如 "#ffffff" 
现在只支持边框为1像素 如果超过1像素产生的图形会比较奇怪 
如果不设置边框 则没有边框 可以正常使用 
本函数返回的是一个Roundp自定义类 
如果要设置p的内容请用 obj.Content.innerHtml 或 obj.Content.innerText设置 
如果要设置p的高度请用 obj.p.style.width obj.p.style.height设置 
*/ 
/**************************************************************************/ 
/**************************************************************************/ 
//取得一个圆角p 
function getRoundp(argBorderStyle,argBgColor){ 
    //创建元素 
    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") 
    //背景设置 
    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"; 
    //样式设置 
    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"; 
     
    //高度设置 
    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"; 
     
    //边框设置 
    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; 
     
    //空白间距设置 
    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); 
    pContentMax.appendChild(pContent) 
    pPane.appendChild(bTop) 
    pPane.appendChild(pContentMax) 
    pPane.appendChild(bBottom) 
    var objRoundp = new Roundp(); 
    objRoundp.p=pPane; 
    objRoundp.Content=pContent; 
    return objRoundp; 
} 
/**************************************************************************/ 
/**************************************************************************/ 
//自定义类（用来装载p对应内容） 
function Roundp(){ 
    this.content=0;//p内容 
    this.p=0;//p容器 
} 
/**************************************************************************/

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Implementierungsprinzips und des Prozesscodes von Javascript Rounded Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!