이미지 없이 라운딩 박스 + 보더 표현하기 입니다. 정보
JavaScript 이미지 없이 라운딩 박스 + 보더 표현하기 입니다.
본문
<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>
0
 
 
댓글 0개