(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-8242763509535969", enable_page_level_ads: true }); [자바스크립트] inner class 이용해서 미리보기 :: 깜냥깜냥
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
<!DOCTYPE html>
<!-- span 태그 -->
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 이너클래스</title>
<script langauge="javascript">
    function inputHTML() {
        var text = document.getElementById("preview");
        var color = document.getElementById("fontColor").value;
        var size = document.getElementById("size").value;
 
        var font = document.getElementsByName("fstyle");
        var local = document.getElementsByName("flocal");
        var letter = document.getElementsByName("fletter");
 
        var result = text.value.fontcolor(color).fontsize(size);
 
        if (font[0].checked == true) {
            result = result.strike();
        }
 
        if (font[1].checked == true) {
            result = result.bold();
        }
        if (font[2].checked == true) {
            result = result.italics();
        }
        
        if(local[0].checked==true){
            result=result.sup();
        }
        if(local[1].checked==true){
            result=result.sub();
        }
        if(letter[0].checked==true){
            result=result.toLowerCase();
        }
        if(letter[1].checked==true){
            result=result.toUpperCase();
        }
 
        document.getElementById("prev").innerHTML = result;
    }
</script>
</head>
<body align="center" background="#FAFABE">
    <input type="text" id="preview">
    <input type="button" value="미리 보기" onclick="inputHTML()">
    <br> 색상:
    <select id="fontColor">
        <option value="#000000">검정색</option>
        <option value="#5AE0FF">하늘색</option>
        <option value="#FFC5D0">분홍색</option>
        <option value="#bebebe">회색</option>
        <option value="#4BAF4B">연두색</option>
    </select>
    <br> 크기:
    <select id="size">
        <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>
    </select>
    <br>
    <input type="checkbox" name="fstyle" >취소선
 
    <input type="checkbox" name="fstyle" >두껍게
    <input type="checkbox" name="fstyle">기울임
    <br>
 
    <input type="radio" name="flocal" value="위첨자">위첨자
    <input type="radio" name="flocal" value="아래첨자">아래첨자
    <input type="radio" name="fletter" value="소문자로">소문자로
    <input type="radio" name="fletter" value="대문자로">대문자로
    
    <br>
    <span id="prev"></span>
 
 
</body>
</html>


'code > 웹' 카테고리의 다른 글

[자바스크립트] 만년달력 / 달력  (0) 2017.04.20
[자바스크립트] 계산기  (0) 2017.04.20
[자바스크립트]유효성 검사를 한 회원가입 페이지  (0) 2017.04.20
[자바스크립트] 폰트 설정해주기!  (0) 2017.04.20
[HTML] 회원가입 페이지 만들기  (0) 2017.04.20

+ Recent posts

티스토리툴바