Javascript Rounded divの実装原理と処理コードを詳しく解説

現在では、一般的に角の丸みは画像によって制御されますが、この方法には利点があります (結果として角が丸くなるのは滑らかです)。 しかし同時に、p のスタイルと色を動的に変更したい場合は、一致する写真も必要になります。 js を使用して実現することもできます。

実装後の呼び出しコードは次のとおりです

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);

これにより、角の丸い p が生成されます
実装原理: 原理は実際には非常に単純で、p の上部と下部に 3 行を追加し、異なる長さの を使用します。これらの 3 行により、角が丸い効果が得られます。
実装プロセス: これら 3 行を実装する方法。 a4b561c25d9afb9ac8dc4d70affff419 要素を使用し、その高さを 1px に設定します。枠線を表示したい場合は、左右の枠線を追加します。行を追加した後、コンテンツ p とこれらの 3 行をコンテナー (これも p) に入れます。最後に、p クラスが返されます。このクラスには 2 つの属性が含まれています。1 つはコンテナ p で、グラフィックスの位置、サイズ、高さを制御できます。もう 1 つの属性はコンテンツ p です。この p を通じて、この p のコンテンツ、マージン、フォントの色、背景色、フォント サイズなどの属性を設定できます。
注: getRoundp メソッドを呼び出すには、メソッド コンテキストを渡す必要があります。私の理解では、メソッドコンテキストは、メソッドが呼び出されるオブジェクトを指すポインタに相当します。なぜこのメソッドコンテキストを使用するのでしょうか? たとえば、IE の creatPopup メソッドによって生成されたポップアップ ドキュメント内に新しい丸められた p を作成する場合、ポップアップはそれ自体で作成されたコントロールのみを読み込むことができるため、ポップアップ オブジェクトをメソッドに渡して、メソッドコンテキスト。 これに似たコンテキスト function.call(obj,"arg1","arg2") を渡す方法が 2 つあります。 もう 1 つは function.apply(obj,arguments) です
詳細なコードは次のとおりです:

/**************************************************************************/ 
/*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容器 
} 
/**************************************************************************/

以上がJavascript Rounded divの実装原理と処理コードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。