[스크립트] 이미지 없는 둥글게 테두리 DIV
<!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>
<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에서 이동 됨]
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1130 | 18년 전 | 2463 | ||
| 1129 | 18년 전 | 2447 | ||
| 1128 | 18년 전 | 2319 | ||
| 1127 | 18년 전 | 2551 | ||
| 1126 |
 뜨락의이름 |
18년 전 | 3846 | |
| 1125 | 18년 전 | 3650 | ||
| 1124 |
 PhotoFly |
18년 전 | 2082 | |
| 1123 | 18년 전 | 2019 | ||
| 1122 | 18년 전 | 1554 | ||
| 1121 | 18년 전 | 3885 | ||
| 1120 | 18년 전 | 5892 | ||
| 1119 | 18년 전 | 6978 | ||
| 1118 | 18년 전 | 2464 | ||
| 1117 |
BEST79
|
18년 전 | 2707 | |
| 1116 | 18년 전 | 4174 | ||
| 1115 | 18년 전 | 2176 | ||
| 1114 |
 꿈꾸는비행기 |
18년 전 | 3627 | |
| 1113 | 18년 전 | 2869 | ||
| 1112 | 18년 전 | 2724 | ||
| 1111 | 18년 전 | 2191 | ||
| 1110 | 18년 전 | 2459 | ||
| 1109 | 18년 전 | 2592 | ||
| 1108 | 18년 전 | 3082 | ||
| 1107 | 18년 전 | 3725 | ||
| 1106 | 18년 전 | 3265 | ||
| 1105 | 18년 전 | 2771 | ||
| 1104 |
 예감커뮤니케이션 |
18년 전 | 2267 | |
| 1103 | 18년 전 | 2933 | ||
| 1102 | 18년 전 | 3021 | ||
| 1101 | 18년 전 | 2536 | ||
| 1100 | 18년 전 | 2297 | ||
| 1099 | 18년 전 | 3324 | ||
| 1098 | 18년 전 | 4844 | ||
| 1097 | 18년 전 | 5071 | ||
| 1096 | 18년 전 | 2290 | ||
| 1095 | 18년 전 | 2184 | ||
| 1094 | 18년 전 | 4996 | ||
| 1093 | 18년 전 | 8954 | ||
| 1092 | 18년 전 | 2039 | ||
| 1091 |
DeepnBlue
|
18년 전 | 4917 | |
| 1090 |
 강강술냄세 |
18년 전 | 4364 | |
| 1089 |
도날드주주
|
18년 전 | 2602 | |
| 1088 |
예감커뮤니케이션 |
18년 전 | 4957 | |
| 1087 | 18년 전 | 2783 | ||
| 1086 | 18년 전 | 3667 | ||
| 1085 | 18년 전 | 2616 | ||
| 1084 | 18년 전 | 3429 | ||
| 1083 | 18년 전 | 1939 | ||
| 1082 | 18년 전 | 5372 | ||
| 1081 | 18년 전 | 1688 | ||
| 1080 | 18년 전 | 6049 | ||
| 1079 |
 친절한서기 |
18년 전 | 2871 | |
| 1078 | 18년 전 | 6033 | ||
| 1077 |
뜨락의이름 |
18년 전 | 6834 | |
| 1076 | 18년 전 | 3725 | ||
| 1075 | 18년 전 | 2204 | ||
| 1074 |
hwatta
|
18년 전 | 2095 | |
| 1073 | 18년 전 | 6896 | ||
| 1072 | 18년 전 | 2392 | ||
| 1071 | 18년 전 | 3949 | ||
| 1070 |
친절한서기 |
18년 전 | 5341 | |
| 1069 | 18년 전 | 2689 | ||
| 1068 | 18년 전 | 1742 | ||
| 1067 | 18년 전 | 1568 | ||
| 1066 | 18년 전 | 1518 | ||
| 1065 | 18년 전 | 1798 | ||
| 1064 | 18년 전 | 1792 | ||
| 1063 | 18년 전 | 1780 | ||
| 1062 | 18년 전 | 1715 | ||
| 1061 | 18년 전 | 2504 | ||
| 1060 | 18년 전 | 2304 | ||
| 1059 | 18년 전 | 3462 | ||
| 1058 | 18년 전 | 2588 | ||
| 1057 | 18년 전 | 2573 | ||
| 1056 | 18년 전 | 3409 | ||
| 1055 | 18년 전 | 4621 | ||
| 1054 | 18년 전 | 2961 | ||
| 1053 | 18년 전 | 2797 | ||
| 1052 | 18년 전 | 3346 | ||
| 1051 | 18년 전 | 6278 | ||
| 1050 | 18년 전 | 2179 | ||
| 1049 | 18년 전 | 1986 | ||
| 1048 | 18년 전 | 1939 | ||
| 1047 | 18년 전 | 2005 | ||
| 1046 | 18년 전 | 3191 | ||
| 1045 | 18년 전 | 2262 | ||
| 1044 | 18년 전 | 1950 | ||
| 1043 | 18년 전 | 1616 | ||
| 1042 | 18년 전 | 2077 | ||
| 1041 | 18년 전 | 3360 | ||
| 1040 | 18년 전 | 3229 | ||
| 1039 | 18년 전 | 1915 | ||
| 1038 | 18년 전 | 1486 | ||
| 1037 | 18년 전 | 3181 | ||
| 1036 | 18년 전 | 2055 | ||
| 1035 | 18년 전 | 1613 | ||
| 1034 | 18년 전 | 2837 | ||
| 1033 | 18년 전 | 1966 | ||
| 1032 | 18년 전 | 1840 | ||
| 1031 | 18년 전 | 1810 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기