이전
목록
다음
트렌드나인

[스크립트] 이미지 없는 둥글게 테두리 DIV

R524
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2007-03-05 (월) 13:24:13 · 4373
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
 * {font-size:12px;}
 #test {padding:3px;}
</style>

</head>

<body>


<div id='test'>이미지 없이 라운딩 박스 + 보더 표현하기!</div>


<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>
<p>
<a href="#" onclick="round(document.getElementById('test'),'#f0f0f0','#c0c0c0')">배경+테두리</a> <br />

<a href="#" onclick="round(document.getElementById('test'),'#eeeeee')">배경만</a> <br />


<a href="javascript:window.location.reload()">원상태로</a> <br />
</p>
</body>
</html>
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
#개발자팁 #개발자 #팁자료실 #javascript
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
07-03-10 조회 4,967
07-03-09 조회 3,972
07-03-08 조회 4,463
07-03-08 조회 3,947
07-03-08 조회 2,840
07-03-08 조회 3,250
07-03-08 조회 4,859
07-03-08 조회 4,135
07-03-07 조회 4,139
07-03-07 조회 4,798
07-03-07 조회 3,311
07-03-06 조회 3,450
07-03-05 조회 4,374
07-03-05 조회 2,979
07-03-04 조회 3,371
07-03-04 조회 3,659
07-03-04 조회 2,879
07-03-04 조회 3,301
07-03-04 조회 3,098
07-03-03 조회 3,669
07-03-02 조회 3,064
07-03-02 조회 2,867
07-03-02 조회 2,910
07-03-02 조회 2,900
07-03-02 조회 3,898
07-03-02 조회 2,725
07-03-02 조회 6,806
07-03-01 조회 3,581
07-03-01 조회 2,781
07-03-01 조회 5,917
07-02-28 조회 3,198
07-02-27 조회 6,081
07-02-27 조회 4,369
07-02-26 조회 3,272
07-02-26 조회 2,952
07-02-26 조회 3,304
07-02-26 조회 2,925
07-02-26 조회 2,988
07-02-26 조회 3,049
07-02-25 조회 3,675
07-02-24 조회 4,791
07-02-24 조회 7,145
07-02-24 조회 4,982
07-02-23 조회 4,297
07-02-23 조회 3,361
07-02-23 조회 3,625
07-02-23 조회 3,364
07-02-23 조회 3,595
07-02-23 조회 3,543
07-02-22 조회 3,974
07-02-22 조회 3,773
07-02-22 조회 3,196
07-02-22 조회 4,482
07-02-21 조회 4,844
07-02-21 조회 5,053
07-02-21 조회 4,565
07-02-20 조회 4,644
07-02-19 조회 3,802
07-02-19 조회 3,703
07-02-19 조회 3,665
07-02-19 조회 3,530
07-02-19 조회 3,812
07-02-18 조회 5,084
07-02-17 조회 4,826
07-02-16 조회 3,287
07-02-15 조회 3,172
07-02-15 조회 2,719
07-02-14 조회 5,176
07-02-14 조회 7,050
07-02-14 조회 8,126
07-02-14 조회 3,789
07-02-12 조회 3,896
07-02-12 조회 5,376
07-02-12 조회 3,431
07-02-11 조회 4,815
07-02-10 조회 4,124
07-02-10 조회 4,009
07-02-10 조회 3,506
07-02-10 조회 3,763
07-02-09 조회 3,888
07-02-09 조회 4,399
07-02-08 조회 4,926
07-02-08 조회 4,556
07-02-04 조회 4,039
07-02-04 조회 3,557
07-02-03 조회 4,158
07-02-03 조회 4,257
07-02-02 조회 3,751
07-02-02 조회 3,553
07-02-02 조회 4,562
07-02-02 조회 6,252
07-02-02 조회 6,362
07-02-01 조회 3,575
07-01-31 조회 3,420
07-01-30 조회 6,309
07-01-30 조회 1만
07-01-29 조회 3,275
07-01-28 조회 6,170
07-01-27 조회 5,672
07-01-26 조회 3,828
글쓰기