글자 변환

JavaScript/바닐라.js

글자 변환

충 민 2022. 9. 8. 16:58

Html CSS Javascript를 배우고

원하는 폰트의 크기 색상 모양(중복가능)을 선택한 후 미리보기 버튼을 누를때마다 변환이 되게 만들어 보았다.

색상:

크기:
취소선 크게 작게 두껍게 기울임
위첨자 아래첨자 소문자로 대문자로

[소스코드]

<html>
    <head>
        <script>
            function subject(){
                var input = document.querySelector(".input");
                var text = document.querySelector(".text");
                text.innerHTML = input.value;

                var color = document.querySelector("#color").value;
                text.style.color = color;

                var size = document.querySelector("#size").value;
                text.style.fontSize = size;

                var check = document.getElementsByName("subject");
                for(var i=0;i<check.length;i++){
                    if(check[i].checked){
                        var tmp = text.innerHTML;
                        if(i==0){
                            text.innerHTML=tmp.strike();
                        }else if(i==1){
                            text.innerHTML=tmp.big();
                        }
                        else if(i==2){
                            text.innerHTML=tmp.small();
                        }
                        else if(i==3){
                            text.innerHTML=tmp.bold();
                        }
                        else if(i==4){
                            text.innerHTML=tmp.italics();
                        }
                        else if(i==5){
                            text.innerHTML=tmp.sup();
                        }
                        else if(i==6){
                            text.innerHTML=tmp.sub();
                        }
                        else if(i==7){
                            text.innerHTML=tmp.toLowerCase();
                        }
                        else if(i==8){
                            text.innerHTML=tmp.toUpperCase();
                        }
                        
                    }
                    
                }
            }          
        </script>
    </head>
    <body>
        <input type="text" class="input">
        <button onclick="subject()">미리보기</button>
        <div>
            색상: <select name="color" id="color">
                <option value="red">빨강</option>
                <option value="blue">파랑</option>
                <option value="green">초록</option>
                <option value="black">검정</option>
            </select>
        </div>
        크기: <select name="size" id="size">
            <option value="50px" style="font-size: 120%;">1</option>
            <option value="60px"style="font-size: 120%;">2</option>
            <option value="70px"style="font-size: 120%;">3</option>
            <option value="80px"style="font-size: 120%;">4</option>
        </select><br>
        <input type="checkbox"name="subject"value="a">취소선
        <input type="checkbox" name="subject"value="b">크게
        <input type="checkbox" name="subject"value="c">작게
        <input type="checkbox" name="subject"value="d">두껍게
        <input type="checkbox" name="subject"value="e">기울임<br>
        <input type="checkbox" name="subject"value="f">위첨자
        <input type="checkbox" name="subject"value="g">아래첨자
        <input type="checkbox" name="subject"value="h">소문자로
        <input type="checkbox" name="subject"value="i">대문자로
        <br>
        <span class="text"></span>
    </body>
</html>