Javascript 반올림 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의 상단과 하단에 세 줄을 추가하고 다른 길이를 사용합니다. 이 세 줄은 둥근 모서리 효과를 만들어냅니다.
구현 프로세스: 이 세 줄을 구현하는 방법입니다. a4b561c25d9afb9ac8dc4d70affff419 요소를 사용하고 높이를 1px로 설정합니다. 테두리를 표시하려면 왼쪽 및 오른쪽 테두리를 추가하세요. 줄을 추가한 후 내용 p와 이 세 줄을 p인 컨테이너에 넣습니다. 마지막으로 p 클래스가 반환됩니다. 이 클래스에는 두 가지 속성이 포함되어 있습니다. 하나는 컨테이너 p입니다. 이 컨테이너 p를 통해 그래픽의 위치, 크기 및 높이를 제어할 수 있습니다. 또 다른 속성은 컨텐츠 p입니다. 이 p를 통해 이 p의 컨텐츠, 여백, 글꼴 색상, 배경색, 글꼴 크기 및 기타 속성을 설정할 수 있습니다.
참고: getRoundp 메서드를 호출하려면 메서드 컨텍스트를 전달해야 합니다. 내 이해는 메서드 컨텍스트가 메서드가 호출되는 개체를 가리키는 포인터와 동일하다는 것입니다. 이 메소드 컨텍스트를 사용하는 이유는 무엇입니까? 예를 들어, IE의 creatPopup 메소드로 생성된 팝업 문서에 새로운 둥근 p를 생성하려는 경우 팝업은 자체적으로 생성된 컨트롤만 로드할 수 있으므로 팝업 객체를 메소드에 전달하고 팝업 객체가 가리키는 객체가 될 수 있습니다. 메소드 컨텍스트. 이와 유사한 컨텍스트 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容器 
} 
/**************************************************************************/

위 내용은 Javascript 반올림 div의 구현 원리 및 프로세스 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!