본문 바로가기
jQuery/DOM&jQuery

DOM 라운드박스 심플

by 샷타이거 2009. 7. 2.
먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다.
그런데 굳이 가로가 일정치라면  그방법대로 할필요가 없다.
이번엔 가로 사이즈가 정해진경우

목적은
태그
<div id="cb>내용물</div> 여기에 앞뒤로 라운딩그림을 추가해주는것이다.
dom으로 생성할 코드는
<div id="cbbt"></div> //위 라운드박스
<div id="cb>내용물</div>
<div id="cddd"></div> //아래 라운드박스

//먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 
//두함수의 기능은
insertBefore(A, B); :B 엘레먼트앞에 A를 삽입
insertAfter(A, B);   :B 엘레먼트뒤에 A를 삽입

//먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다.
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function displaydivision(){
     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // 모든 div를 검색
 var cb = document.getElementById("cb"); //cb라는id를 얻는다.
 var bottom = document.createElement("div"); //div태그생성 변수명은 bottom
 bottom.id="cbbb"; // 생성된 태그의 아이디를 cbbb로지정
 insertAfter(bottom, cb); //insertAfter을 이용해서 cb 아래에 만들어준다.

 var header = document.createElement("div");//역시 div태그 생성 변수명은 header
 header.id="cbbt"; //생성된 태그 아이디를 cbbt
 cb.parentNode.insertBefore( header, cb); // nsertBefore를 이용해서 cb위에 만들어준다.
}

댓글