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

· 10년 전 · 2647

<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>

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

개발자팁

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

+
분류 제목 글쓴이 날짜 조회
JavaScript 10년 전 조회 3,200
JavaScript 10년 전 조회 2,819
JavaScript 10년 전 조회 3,166
JavaScript 10년 전 조회 3,184
JavaScript 10년 전 조회 1만
jQuery 10년 전 조회 3,621
jQuery 10년 전 조회 3,492
jQuery 10년 전 조회 4,767
jQuery 10년 전 조회 4,008
node.js 10년 전 조회 5,187
jQuery 10년 전 조회 3,458
JavaScript 10년 전 조회 3,329
JavaScript 10년 전 조회 2,890
JavaScript 10년 전 조회 2,383
JavaScript 10년 전 조회 2,648
JavaScript 10년 전 조회 2,800
JavaScript 10년 전 조회 2,324
JavaScript 10년 전 조회 2,738
JavaScript 10년 전 조회 3,213
JavaScript 10년 전 조회 2,821
JavaScript 10년 전 조회 2,938
JavaScript 10년 전 조회 3,666
JavaScript 10년 전 조회 3,116
JavaScript 10년 전 조회 2,951
JavaScript 10년 전 조회 3,175
JavaScript 10년 전 조회 3,247
JavaScript 10년 전 조회 5,370
JavaScript 10년 전 조회 2,714
JavaScript 10년 전 조회 2,673
기타 10년 전 조회 4,000