视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Javascript圆角div的实现原理和过程代码详解
2020-11-27 20:15:04 责编:小采
文档


现在实现圆角普遍用图片来控制,这种方法有其优点(产生的圆角平滑)。 但同时他也要求有吻合的图片,如果要动态的改变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的top和bottom 加上三条线,用这三条线的不同长度来产生圆角的效果。
实现过程: 如何实现这三条线呢。 用<b> 这个元素,将其高度 设置为1px 。如果要显示边框则为其添加左边框和右边框。添加好线条以后,将内容p 和这三条线放在一个容器里,这个容器也是一个p。最终返回一个p类,这个类放两个属性,一个是容器p,通过这个容器p可以控制图形出现的位置和大小高度等属性。另一个属性是内容p,通过这个p可以设置这个p的内容,margin,字体颜色,背景颜色,字体大小,等属性。
注意的问题: 调用 getRoundp 这个方法需要传递一个方法上下文。我的理解是方法上下文相当与一个指针,指向调用方法的对象。为什么要用这个方法上下文呢? 比如要在ie的 creatPopup 方法 产生出来的popup文档内新建一个圆角p的话,由于popup只能加载他自己创建的控件,所以可以将popup对象传递到方法内部,成为方法上下文指向的对象。 传递上下文的方法有两种function.call(obj,"arg1","arg2") 类似与这样。 另一种是 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容器 
} 
/**************************************************************************/

下载本文
显示全文
专题