자바 스크립트
글자 크기,글골,색 바꾸기
html+자바스크립트 두개의 언어를 알아 야 이해 할수 있다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165 |
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 함수</title>
<script language="javascript">
function previewString(){
var objResult = document.getElementById("result");
var objText = document.getElementById("tbString");
var objFontColor = document.getElementById("fontColor");
var objFontSize = document.getElementById("fontSize");
var objOptions = document.getElementsByName("fontOptions");
//tag id name 이3개를 읽을수 있음
var targetString = objText.value;
targetString = targetString.fontcolor(objFontColor.options[objFontColor.selectedIndex].value);
targetString = targetString.fontsize(objFontSize.options[objFontSize.selectedIndex].value);
if(objOptions[0].checked){
targetString = targetString.strike();
}
if(objOptions[1].checked){
targetString = targetString.big();
}
if(objOptions[2].checked){
targetString = targetString.small();
}
if(objOptions[3].checked){
targetString = targetString.bold();
}
if(objOptions[4].checked){
targetString = targetString.italic();
}
if(objOptions[5].checked){
targetString = targetString.sup();
}
if(objOptions[6].checked){
targetString = targetString.sub();
}
if(objOptions[7].checked){
targetString = targetString.toLowerCase();
}
if(objOptions[8].checked){
targetString = targetString.toUpperCase();
}
objResult.innerHTML = targetString;
}
</script>
</head>
<body>
<input type="text" id="tbString">
<input type="button" value="미리 보기" onclick="previewString()"> <br>
색상 : <select id="fontColor">
<option value="red">빨강 </option>
<option value="blue">파랑 </option>
<option value="yellow">노랑 </option>
</select><br>
크기 : <select id="fontSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br>
<input type="checkbox" name="fontOptions" >취소선
<input type="checkbox" name="fontOptions" >크게
<input type="checkbox" name="fontOptions" >작게
<input type="checkbox" name="fontOptions" >두껍게
<input type="checkbox" name="fontOptions" >기울임
<br>
<input type="checkbox" name="fontOptions" >위첨자
<input type="checkbox" name="fontOptions" >아래첨자
<input type="checkbox" name="fontOptions" >소문자로
<input type="checkbox" name="fontOptions" >대문자로
<br>
<span id = "result"></span>
</body>
</html> |
cs |
'HTML' 카테고리의 다른 글
| [jQuery][유효성 검서] (0) | 2018.04.09 |
|---|---|
| [html][달력] (0) | 2018.04.06 |
| [html][계산기] (0) | 2018.04.06 |
| [HTML][기초] (0) | 2018.04.04 |
| [HTML][기능 넣어주기] (0) | 2018.04.04 |
