[긴급]PHP 원격 코드 실행 취약점 안내
이전
목록
다음
트렌드나인

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

R524
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2007-03-05 (월) 13:24:13 · 4384
<!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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
10-09-25 조회 2,740
10-09-19 조회 2,777
10-09-15 조회 2,778
10-09-15 조회 4,183
10-09-15 조회 3,420
10-09-15 조회 2,518
10-09-07 조회 3,632
10-08-27 조회 4,084
10-06-11 조회 4,269
10-05-31 조회 2,510
10-02-27 조회 5,027
10-02-09 조회 3,773
09-10-10 조회 7,365
09-03-19 조회 3,227
09-02-09 조회 3,495
09-02-09 조회 4,548
08-11-01 조회 2,932
08-09-29 조회 4,584
08-09-26 조회 3,527
08-09-26 조회 3,601
08-09-26 조회 2,737
08-09-26 조회 3,780
08-09-26 조회 3,507
08-09-26 조회 4,273
08-09-18 조회 3,605
08-09-09 조회 3,248
08-08-28 조회 2,791
08-07-06 조회 3,559
08-05-21 조회 4,724
08-05-13 조회 4,564
08-04-17 조회 4,937
08-02-19 조회 3,554
08-01-18 조회 3,866
08-01-10 조회 3,837
07-10-22 조회 3,669
07-10-09 조회 4,335
07-10-03 조회 3,532
07-07-06 조회 4,228
07-07-06 조회 4,441
07-07-06 조회 4,057
07-06-28 조회 3,594
07-06-05 조회 3,597
07-06-05 조회 4,138
07-05-30 조회 3,309
07-05-02 조회 3,696
07-04-15 조회 5,175
07-04-11 조회 3,653
07-04-05 조회 3,956
07-03-31 조회 3,171
07-03-31 조회 4,144
07-03-30 조회 3,758
07-03-24 조회 4,017
07-03-22 조회 3,677
07-03-12 조회 4,427
07-02-16 조회 3,300
07-02-14 조회 5,186
07-02-10 조회 4,018
07-02-09 조회 4,410
07-01-19 조회 4,070
07-01-16 조회 4,996
06-12-16 조회 5,865
06-11-30 조회 3,620
06-11-25 조회 3,729
06-10-15 조회 5,085
06-09-26 조회 5,330
06-09-26 조회 5,442
06-09-22 조회 4,297
06-09-21 조회 3,561
06-09-21 조회 3,658
06-09-02 조회 3,503
06-08-08 조회 5,134
06-07-20 조회 3,752
06-07-17 조회 3,379
06-07-13 조회 4,205
06-07-11 조회 3,496
06-07-11 조회 3,501
06-07-11 조회 3,866
06-06-29 조회 6,087
06-06-19 조회 6,479
06-06-02 조회 3,529
06-05-24 조회 5,013
06-05-14 조회 7,806
06-05-08 조회 3,920
06-02-02 조회 5,476
05-12-16 조회 4,535
05-12-05 조회 5,180
05-06-28 조회 4,137
05-04-11 조회 4,088
05-04-11 조회 4,269
05-04-11 조회 3,338
05-03-13 조회 3,242
05-03-12 조회 4,313
04-12-08 조회 7,797
04-12-01 조회 5,213
04-11-28 조회 3,384
04-11-28 조회 3,227
04-08-05 조회 5,646
04-08-05 조회 4,989
04-08-05 조회 5,600
글쓰기