Javascript 반올림 div 구현 code_javascript 기술

요즘에는 둥근 모서리가 일반적으로 그림으로 제어됩니다. 이 방법에는 장점이 있습니다(결과적으로 둥근 모서리가 매끄러워집니다). 그러나 동시에 div의 스타일과 색상을 동적으로 변경하려면 일치하는 사진도 필요합니다. 이를 달성하기 위해 js를 사용하는 것도 있습니다.
구현된 호출 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다

var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")
objDiv.Div.style.width="100px"
objDiv.Content.style.margin="6 6 6 6 "
objDiv.Content.innerText="반올림된 div 테스트입니다."
document.body.appendChild(objDiv.Div);

이렇게 하면 둥근 div
가 생성됩니다. 구현 원리: 실제로 원리는 div의 상단과 하단에 세 줄을 추가하고 이 세 줄의 서로 다른 길이를 사용하여 생성됩니다. 둥근 모서리 효과.

구현 프로세스: 이 세 줄을 구현하는 방법입니다. 요소를 사용하고 높이를 1px로 설정합니다. 테두리를 표시하려면 왼쪽 및 오른쪽 테두리를 추가하세요. 줄을 추가한 후 콘텐츠 div와 이 세 줄을 컨테이너에 넣습니다. 이 컨테이너도 div입니다. 마지막으로 div 클래스가 반환됩니다. 이 클래스에는 두 가지 속성이 포함되어 있습니다. 하나는 컨테이너 div를 통해 그래픽의 위치, 크기, 높이 및 기타 속성을 제어할 수 있습니다. 또 다른 속성은 콘텐츠 div이며, 이를 통해 이 div의 콘텐츠, 여백, 글꼴 색상, 배경색, 글꼴 크기 및 기타 속성을 설정할 수 있습니다.

참고: getRoundDiv 메서드를 호출하려면 메서드 컨텍스트를 전달해야 합니다. 내 이해는 메서드 컨텍스트가 메서드가 호출되는 개체를 가리키는 포인터와 동일하다는 것입니다. 이 메소드 컨텍스트를 사용하는 이유는 무엇입니까? 예를 들어, IE의 creatPopup 메소드로 생성된 팝업 문서에 새로운 둥근 div를 생성하려는 경우 팝업은 자체적으로 생성된 컨트롤만 로드할 수 있으므로 팝업 개체를 메소드에 전달하고 해당 팝업 개체가 가리키는 개체가 될 수 있습니다. 메소드 컨텍스트. 이와 유사한 컨텍스트 function.call(obj,"arg1","arg2") 을 전달하는 두 가지 방법이 있습니다. 다른 하나는 function.apply(obj,arguments)

상세 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/**************************************************************************/
/*RoundDiv.js 产生一个圆角div
调用前需设置函数上下文(上下文是指，要创建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd")
函数参数argBorderStyle: 边框样式，字符串 例如 "1px solid black"
函数参数argBgColor: 背景颜色，字符串 例如 "#ffffff"
现在只支持边框为1像素 如果超过1像素产生的图形会比较奇怪
如果不设置边框 则没有边框 可以正常使用
本函数返回的是一个RoundDiv自定义类
如果要设置div的内容请用 obj.Content.innerHtml 或 obj.Content.innerText设置
如果要设置div的高度请用 obj.Div.style.width obj.Div.style.height设置
*/
/**************************************************************************/
/**************************************************************************/
//取得一个圆角div
function getRoundDiv(argBorderStyle,argBgColor){

    //创建元素
    var divPane =this.createElement("div")
    var divContent =this.createElement("div")
    var divContentMax =this.createElement("div")
    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")

    //背景设置
    divPane.style.backgroundColor=argBgColor;
    divContent.style.backgroundColor=argBgColor;
    divContentMax.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";

    
    //高度设置
    divContent.style.height="100%";
    divContentMax.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";

    
    //边框设置
    divContentMax.style.borderLeft=argBorderStyle
    divContentMax.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);

    divContentMax.appendChild(divContent)
    divPane.appendChild(bTop)
    divPane.appendChild(divContentMax)
    divPane.appendChild(bBottom)
    var objRoundDiv = new RoundDiv();
    objRoundDiv.Div=divPane;
    objRoundDiv.Content=divContent;
    objRoundDiv를 반환합니다.

}
/************************************************** ************************/
/************************************************** ************************/
//自정义类（용来装载div对应内容）
함수 RoundDiv (){
    this.content=0;//div内容
    this.div=0;//div容器
}
/************************************************** ************************/