천

이미지 없이 라운딩 박스 + 보더 표현하기 입니다.

· 2015-12-22 (화) 03:24:26 · 2912

<script>

function round(elm, bgcolor, border, mode) {
  var top = document.createElement('div'); top.style.cssText = 'height:5px';
  var bottom = document.createElement('div');bottom.style.cssText = 'height:5px';
  var temp = document.createElement('div'); temp.setAttribute('id', 'template');
  var border2 = (border) ? ";border-left:2px solid "+border+";border-right:2px solid "+border : "";
  var border1 = (border) ? ";border-left:1px solid "+border+";border-right:1px solid "+border : "";
  var bgcolor2 = (bgcolor) ? ";background:"+bgcolor : "";
  var bgcolor1 = (border) ? ";background:" + border : (bgcolor) ? ";background:" + bgcolor : "";

  var top_r = new Array(), bottom_r =new Array;
  var box = elm.cloneNode(true)
  for (i=1; i < 5 ;i++ )
  { top_r[i] = document.createElement('div')}

  top_r[1].style.cssText = 'margin:0px 5px;height:1px' + bgcolor1 ;
  top_r[2].style.cssText = 'margin:0px 3px;height:1px' + border2 + bgcolor2;
  top_r[3].style.cssText = 'margin:0px 2px;height:1px' + border1 + bgcolor2;
  top_r[4].style.cssText = 'margin:0px 1px;height:2px' + border1 + bgcolor2;

 
  for (i=1; i < 5 ;i++ ) {
    if (mode!='bottom') { top.appendChild(top_r[i]);temp.appendChild(top); }
    bottom_r[i] = top_r[i].cloneNode(true);
  }

  temp.appendChild(box);
  box.style.cssText =  border1 + bgcolor2;
  temp.appendChild(bottom);

  if (mode!='top') {
    for (i=4; i > 0 ;i-- ) {
      bottom.appendChild(bottom_r[i]);
    }
  }

  elm.parentNode.replaceChild(temp, elm);

}

</script>

|
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
JavaScript 15-12-22 조회 2,913
JavaScript 15-12-22 조회 3,079
JavaScript 15-12-22 조회 2,545
JavaScript 15-12-21 조회 2,975
JavaScript 15-12-21 조회 3,454
JavaScript 15-12-21 조회 3,060
JavaScript 15-12-20 조회 3,176
JavaScript 15-12-20 조회 3,907
JavaScript 15-12-20 조회 3,355
JavaScript 15-12-19 조회 3,194
JavaScript 15-12-19 조회 3,429
JavaScript 15-12-19 조회 3,490
JavaScript 15-12-18 조회 5,611
JavaScript 15-12-18 조회 2,926
JavaScript 15-12-18 조회 2,926
기타 15-12-17 조회 4,235
JavaScript 15-12-17 조회 3,556
JavaScript 15-12-17 조회 3,433
JavaScript 15-12-17 조회 2,895
JavaScript 15-12-16 조회 2,671
JavaScript 15-12-16 조회 3,853
JavaScript 15-12-16 조회 3,247
jQuery 15-12-16 조회 3,630
jQuery 15-12-15 조회 4,549
JavaScript 15-12-15 조회 2,736
JavaScript 15-12-15 조회 2,979
JavaScript 15-12-15 조회 2,929
JavaScript 15-12-14 조회 2,603
JavaScript 15-12-14 조회 3,291
JavaScript 15-12-14 조회 2,582