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 | <html> <head> <script> function previewString() { var objResult = document.getElementById("result"); var objText = document.getElementById("tbString"); var objFontColor = document.getElementById("textColor"); var objFontSize = document.getElementById("textSize"); 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 ); 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.toLowserCase(); } 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><br> 색상 : <select id="textColor"> <option value="red">빨강</option> <option value="blue">파랑</option> <option value="green">초록</option> </select> <br><br> 크기 : <select id="textSize"> <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> </select> <br><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><br> <input type="checkbox" name="fontOptions">위첨자 <input type="checkbox" name="fontOptions">아래첨자 <input type="checkbox" name="fontOptions">소문자로 <input type="checkbox" name="fontOptions">대문자로 <br><br> <span id="result"></span> </body> </html> | cs |
아래는 출력 결과 입니다
