티스토리 뷰
반응형
* text input 폼에 글자를 넣고 원하는 옵션을 선택한 뒤 미리보기 버튼을 눌러보자. 내가 원하는 옵션대로 글자가 변경되도록 만들수 있을것이다.
|
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 |
<!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");
var targetString = objText.value;
targetString = targetString.fontcolor(
objFontColor.options[objFontColor.selectedIndex].value);
targetString = targetString.fontsize(
objFontSize.options[objFontSize.selectedIndex].value);
//size값을 ㅃ보아와서 다시 넣어줌
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.italics();
}
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="green">초록</option>
<option value="blue" >파랑</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select><br>
<!-- 체크박스 1 -->
<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 |
* 완성 화면
반응형
'Web > JavaScript & JQuery' 카테고리의 다른 글
| [JavaScript] 뒤로가기 버튼 막기 (3) | 2018.05.11 |
|---|---|
| [JavaScript]회원가입 유효성 만들기 (0) | 2018.04.06 |
| [JavaScript]달력 만들기, Date 객체 (12) | 2018.04.06 |
| [JavaScript]계산기 만들기,문자열 검색,배열 (1) | 2018.04.05 |
| [JavaScript]HTML 에서 JavaScript 호출하기 (0) | 2018.04.04 |
댓글
공지사항