Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée du principe de mise en œuvre et du code de processus du div arrondi Javascript

伊谢尔伦
Libérer: 2017-07-26 17:13:30
original
1451 Les gens l'ont consulté

De nos jours, les coins arrondis sont généralement contrôlés par des images. Cette méthode a ses avantages (les coins arrondis obtenus sont lisses). Mais en même temps, il a également besoin de faire correspondre les images. S'il veut changer dynamiquement le style et la couleur de p, ce sera un peu difficile. Il y a aussi l'utilisation de js pour y parvenir.

Le code d'appel après implémentation est le suivant

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);
Copier après la connexion

Cela produit un p arrondi
Principe d'implémentation : Le principe est en fait très simple. Ajoutez trois lignes en haut et en bas de p et utilisez les différentes longueurs de ces trois lignes pour créer un effet de coin arrondi.
Processus de mise en œuvre : Comment mettre en œuvre ces trois lignes. Utilisez l'élément et définissez sa hauteur sur 1px. Si vous souhaitez afficher des bordures, ajoutez-leur des bordures gauche et droite. Après avoir ajouté les lignes, mettez le contenu p et ces trois lignes dans un conteneur, qui est aussi un p. Enfin, une classe p est renvoyée. Cette classe contient deux attributs. L'un est le conteneur p, la position, la taille et la hauteur des graphiques peuvent être contrôlées. Un autre attribut est le contenu p. Grâce à ce p, vous pouvez définir le contenu, la marge, la couleur de la police, la couleur d'arrière-plan, la taille de la police et d'autres attributs de ce p.
Remarque : L'appel de la méthode getRoundp nécessite de passer un contexte de méthode. Je crois comprendre que le contexte de la méthode équivaut à un pointeur pointant vers l'objet sur lequel la méthode est appelée. Pourquoi utiliser ce contexte de méthode ? Par exemple, si vous souhaitez créer un nouveau p arrondi dans le document contextuel généré par la méthode creatPopup d'IE, puisque le popup ne peut charger que les contrôles créés par lui-même, l'objet popup peut être passé dans la méthode et devenir l'objet pointé par le contexte de la méthode. Il existe deux méthodes pour transmettre le contexte function.call(obj,"arg1","arg2") similaires à celle-ci. L'autre est function.apply(obj,arguments)
Le code détaillé est le suivant :

/**************************************************************************/ 
/*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容器 
} 
/**************************************************************************/
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!