테이블 이젠맘대로 style 프로그램 정보
javascript 테이블 이젠맘대로 style 프로그램본문
<HEAD>
<SCRIPT>
// 출처: korea.internet.com
NI=0,NB=0;
FNI=new Array("normal","italic");
FNB=new Array("normal","bold");
TA=new Array("left","center","right","justify");
Fa=new Array("Arial","Times","Verdana","Bookman","Courier");
Col=new Array("white","silver","black","maroon","red","orange","yellow","green","aqua","blue","magenta");
BordStyle = new Array("none","solid","double","inset","outset","groove","ridge");
FS=30;L=5;
th=0;
//-------------------------------------------------
function Load(){
if (navigator.appName=="Netscape") {alert("이 스크립트는 인터넷 익스플로러에서만 동작합니다!");}
else { es=eval("top.document.all['div0'].style");}
}
//-------------------------------------------------
function Gen(ch,th){
switch(ch){
case "style": switch (NI){
case 0:th.value="italic"; NI=1; break;
case 1:th.value="normal"; NI=0; break;
default:break;}
es.fontStyle=FNI[NI];break;
case "color": es.color=Col[th.selectedIndex]; break;
case "bg": es.background=Col[th.selectedIndex]; break;
case "weight": switch (NB){
case 0:th.value=" bold "; NB=1; break;
case 1:th.value="normal"; NB=0; break;
default:break;}
es.fontWeight=FNB[NB];break;
case "family": es.fontFamily=Fa[th.selectedIndex]; break;
case "size": FS=th.selectedIndex*5+10;
es.fontSize=FS;
es.lineHeight=(FS+L-5)+"px";
break;
case "align": es.textAlign=TA[th.selectedIndex]; break;
case "bord_col": es.borderColor=Col[th.selectedIndex]; break;
case "bord_st": es.borderStyle=BordStyle[th.selectedIndex]; break;
case "bord_w": es.borderWidth=th.selectedIndex; break;
case "line": L=th.selectedIndex;
es.lineHeight=(FS+L-5)+"px"; break;
case "width": es.width=10+10*th.selectedIndex+"%"; break;
default:break;
}
}
</SCRIPT>
<STYLE type='text/css'>
body{background-color:cccccc;text-align:center;}
th{font-size:12px;FONT-FAMILY:Arial;font-weight:normal;}
input{font-size:14px;FONT-FAMILY:Courier;}
#div0{
position:absolute;
left:10px;
top:210px;
border-width:5px;
border-style:outset;
width:100%;
background-color:maroon;
border-color:red;
color:white;
padding-left:12px;
padding-right:4px;
text-align:center;
FONT-FAMILY:Arial;
font-size:30px;
line-height:30px;
}
</STYLE>
</HEAD>
<BODY onload="Load()">
<form name=form0>
<table border=1 cellpadding=4 cellspacing=1>
<tr>
<th>
Font-Style:<br>
<INPUT name=Bs type="button" value="normal" onclick="top.Gen('style',this)" size=6>
<hr>
Font-Weight:<br>
<INPUT name=Bw type="button" value="normal" onclick="top.Gen('weight',this)" size=6>
</th>
<th>
Font-Face:<br>
<SELECT NAME='FF' onChange="top.Gen('family',this)">
<OPTION selected>Arial
<OPTION>Times
<OPTION>Verdana
<OPTION>Bookman
<OPTION>Courier
</SELECT>
<hr>
Font-Size:<br>
<SELECT NAME='FS' onChange="top.Gen('size',this)">
<OPTION>10
<OPTION>15
<OPTION>20
<OPTION>25
<OPTION selected>30
<OPTION>35
<OPTION>40
</SELECT>
</th>
<th>
Width:<br>
<SELECT NAME='WI' onChange="top.Gen('width',this)">
<OPTION>10%
<OPTION>20%
<OPTION>30%
<OPTION>40%
<OPTION>50%
<OPTION>60%
<OPTION>70%
<OPTION>80%
<OPTION>90%
<OPTION selected>100%
</SELECT>
<hr>
Text-Align:<br>
<SELECT NAME='FJ' onChange="top.Gen('align',this)">
<OPTION>left
<OPTION selected>center
<OPTION>right
<OPTION>justify
</SELECT>
<hr>
Line-Height:<br>
<SELECT NAME='LH' onChange="top.Gen('line',this)">
<OPTION>-5
<OPTION>-4
<OPTION>-3
<OPTION>-2
<OPTION>-1
<OPTION selected>0
<OPTION>+1
<OPTION>+2
<OPTION>+3
<OPTION>+4
<OPTION>+5
</SELECT>
</th>
<th>
Border-Style:<br>
<SELECT NAME='BordS' onChange="top.Gen('bord_st',this)">
<OPTION>none
<OPTION>solid
<OPTION>double
<OPTION>inset
<OPTION selected>outset
<OPTION>groove
<OPTION>ridge
</SELECT>
<hr>
Border-Width:<br>
<SELECT NAME='BordW' onChange="top.Gen('bord_w',this)">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION selected>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
<hr>
Border-Color:<br>
<SELECT NAME='BordC' onChange="top.Gen('bord_col',this)">
<OPTION>white
<OPTION>silver
<OPTION>black
<OPTION>maroon
<OPTION selected>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>aqua
<OPTION>blue
<OPTION>magenta
</SELECT>
</th>
<th>
Text-Color:<br>
<SELECT NAME='CC' onChange="top.Gen('color',this)">
<OPTION selected>white
<OPTION>silver
<OPTION>black
<OPTION>maroon
<OPTION>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>aqua
<OPTION>blue
<OPTION>magenta
</SELECT>
<hr>
Bg-Color:<br>
<SELECT NAME='BG' onChange="top.Gen('bg',this)">
<OPTION>white
<OPTION>silver
<OPTION>black
<OPTION selected>maroon
<OPTION>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>aqua
<OPTION>blue
<OPTION>magenta
</SELECT>
</th>
</tr>
</table>
</form>
<div id=div0>Cascading Style Sheets의 효과를 눈으로 확인하세요!</div>
</BODY>
위에 꺼를 html로 저장한다늠 봐보세여 이건프로그램입니당
<SCRIPT>
// 출처: korea.internet.com
NI=0,NB=0;
FNI=new Array("normal","italic");
FNB=new Array("normal","bold");
TA=new Array("left","center","right","justify");
Fa=new Array("Arial","Times","Verdana","Bookman","Courier");
Col=new Array("white","silver","black","maroon","red","orange","yellow","green","aqua","blue","magenta");
BordStyle = new Array("none","solid","double","inset","outset","groove","ridge");
FS=30;L=5;
th=0;
//-------------------------------------------------
function Load(){
if (navigator.appName=="Netscape") {alert("이 스크립트는 인터넷 익스플로러에서만 동작합니다!");}
else { es=eval("top.document.all['div0'].style");}
}
//-------------------------------------------------
function Gen(ch,th){
switch(ch){
case "style": switch (NI){
case 0:th.value="italic"; NI=1; break;
case 1:th.value="normal"; NI=0; break;
default:break;}
es.fontStyle=FNI[NI];break;
case "color": es.color=Col[th.selectedIndex]; break;
case "bg": es.background=Col[th.selectedIndex]; break;
case "weight": switch (NB){
case 0:th.value=" bold "; NB=1; break;
case 1:th.value="normal"; NB=0; break;
default:break;}
es.fontWeight=FNB[NB];break;
case "family": es.fontFamily=Fa[th.selectedIndex]; break;
case "size": FS=th.selectedIndex*5+10;
es.fontSize=FS;
es.lineHeight=(FS+L-5)+"px";
break;
case "align": es.textAlign=TA[th.selectedIndex]; break;
case "bord_col": es.borderColor=Col[th.selectedIndex]; break;
case "bord_st": es.borderStyle=BordStyle[th.selectedIndex]; break;
case "bord_w": es.borderWidth=th.selectedIndex; break;
case "line": L=th.selectedIndex;
es.lineHeight=(FS+L-5)+"px"; break;
case "width": es.width=10+10*th.selectedIndex+"%"; break;
default:break;
}
}
</SCRIPT>
<STYLE type='text/css'>
body{background-color:cccccc;text-align:center;}
th{font-size:12px;FONT-FAMILY:Arial;font-weight:normal;}
input{font-size:14px;FONT-FAMILY:Courier;}
#div0{
position:absolute;
left:10px;
top:210px;
border-width:5px;
border-style:outset;
width:100%;
background-color:maroon;
border-color:red;
color:white;
padding-left:12px;
padding-right:4px;
text-align:center;
FONT-FAMILY:Arial;
font-size:30px;
line-height:30px;
}
</STYLE>
</HEAD>
<BODY onload="Load()">
<form name=form0>
<table border=1 cellpadding=4 cellspacing=1>
<tr>
<th>
Font-Style:<br>
<INPUT name=Bs type="button" value="normal" onclick="top.Gen('style',this)" size=6>
<hr>
Font-Weight:<br>
<INPUT name=Bw type="button" value="normal" onclick="top.Gen('weight',this)" size=6>
</th>
<th>
Font-Face:<br>
<SELECT NAME='FF' onChange="top.Gen('family',this)">
<OPTION selected>Arial
<OPTION>Times
<OPTION>Verdana
<OPTION>Bookman
<OPTION>Courier
</SELECT>
<hr>
Font-Size:<br>
<SELECT NAME='FS' onChange="top.Gen('size',this)">
<OPTION>10
<OPTION>15
<OPTION>20
<OPTION>25
<OPTION selected>30
<OPTION>35
<OPTION>40
</SELECT>
</th>
<th>
Width:<br>
<SELECT NAME='WI' onChange="top.Gen('width',this)">
<OPTION>10%
<OPTION>20%
<OPTION>30%
<OPTION>40%
<OPTION>50%
<OPTION>60%
<OPTION>70%
<OPTION>80%
<OPTION>90%
<OPTION selected>100%
</SELECT>
<hr>
Text-Align:<br>
<SELECT NAME='FJ' onChange="top.Gen('align',this)">
<OPTION>left
<OPTION selected>center
<OPTION>right
<OPTION>justify
</SELECT>
<hr>
Line-Height:<br>
<SELECT NAME='LH' onChange="top.Gen('line',this)">
<OPTION>-5
<OPTION>-4
<OPTION>-3
<OPTION>-2
<OPTION>-1
<OPTION selected>0
<OPTION>+1
<OPTION>+2
<OPTION>+3
<OPTION>+4
<OPTION>+5
</SELECT>
</th>
<th>
Border-Style:<br>
<SELECT NAME='BordS' onChange="top.Gen('bord_st',this)">
<OPTION>none
<OPTION>solid
<OPTION>double
<OPTION>inset
<OPTION selected>outset
<OPTION>groove
<OPTION>ridge
</SELECT>
<hr>
Border-Width:<br>
<SELECT NAME='BordW' onChange="top.Gen('bord_w',this)">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION selected>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
<hr>
Border-Color:<br>
<SELECT NAME='BordC' onChange="top.Gen('bord_col',this)">
<OPTION>white
<OPTION>silver
<OPTION>black
<OPTION>maroon
<OPTION selected>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>aqua
<OPTION>blue
<OPTION>magenta
</SELECT>
</th>
<th>
Text-Color:<br>
<SELECT NAME='CC' onChange="top.Gen('color',this)">
<OPTION selected>white
<OPTION>silver
<OPTION>black
<OPTION>maroon
<OPTION>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>aqua
<OPTION>blue
<OPTION>magenta
</SELECT>
<hr>
Bg-Color:<br>
<SELECT NAME='BG' onChange="top.Gen('bg',this)">
<OPTION>white
<OPTION>silver
<OPTION>black
<OPTION selected>maroon
<OPTION>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>aqua
<OPTION>blue
<OPTION>magenta
</SELECT>
</th>
</tr>
</table>
</form>
<div id=div0>Cascading Style Sheets의 효과를 눈으로 확인하세요!</div>
</BODY>
위에 꺼를 html로 저장한다늠 봐보세여 이건프로그램입니당
추천
0
0
댓글 전체
넷스케이프에서는 안됩니다. ㅠ.ㅠ
