테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

R524
프로필 보기이 회원 글보기
 · 18년 전 · 3167
<!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에서 이동 됨]
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
384
알고있으면 유용한 무료 디자인소스 사이트
12508
JavaScript 서버시간 알아내기
383
css 템플릿 사이트
381
모바일 ui 사이트 1
20395
기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현
12507
PHP 숫자를 한글표기로 바꾸기 입니다.
12506
Mobile Android,IOS 앱용 아이콘 템플릿 참고 사이트
12505
PHP 여러문장을 한번에 자동 줄바꿈 하기 입니다.
12504
웹서버 서버 동시접속자 설정 변경하기
12503
PHP 디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.
12502
PHP PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수
12500
PHP 간단하게 자동으로 테이블 너비 조정하기 입니다. 1
12499
PHP 문자열자르기 (문자별 다른 너비 해결)
12498
MySQL 테이블 복사 쿼리
20392
기타 많이들 사용하시는 Slider 에 대해서... 2
12497
PHP 현재 접속중인 사용자 나타내기
12496
MySQL mysql select 후 update 하기
12495
PHP 다른 페이지로 이동하는 방법 3가지 입니다.
12494
PHP 한글문자열 자르는 법 입니다.
12493
PHP mysql_query 전체 갯수 빨리 알아보기 입니다.
12492
PHP POST값 통째로 인코딩하기, 배열, iconv
12491
PHP 이메일주소 검사하기 입니다.
12490
웹서버 php 확장자 내 맘대로 바꾸기 입니다.
12489
PHP 문자열을 한 문자씩 나누어 출력하기 입니다.
12488
node.js Node js 게시판 프로젝트 소개합니다.
다음
전체 목록