Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

빅데이터 AI 인공지능 IT 꿀팁 아이팁

HTML 실습 : 자바스크립트 본문

HTML

HTML 실습 : 자바스크립트

아이팁 2021. 2. 26. 22:11 
<html>
  <head>
    <title>String 객체로 HTML 코드 생성</title>
    <script language = "javascript"> // javascript 사용
      function findText(){ 
        var txt = document.getElementById("txt").value; //txt 라는 id의 element의 값 가져오기
        var a = document.getElementById("print");// print와 같은 id 찾기
        var fot = document.getElementsByName("fonts") // **
       
        
        txt = txt.fontcolor(color.value);// 선택된 fontcolor 값으로 변경
        txt = txt.fontsize(size.value); // 선택된 fontsize 값으로 변경

        if(fot[0].checked){
            txt = txt.strike(); // 만약 0번째가 checked 된다면 txt폰트를 => strike로 바꿔준다
        }
        if(fot[1].checked){
            txt = txt.big(); //만약 1번째가 checked 된다면 txt폰트를 => big로 바꿔준다
        }
        if(fot[2].checked){
            txt = txt.small(); //만약 2번째가 checked 된다면 txt폰트를 => small로 바꿔준다
        }
        if(fot[3].checked){
            txt = txt.bold(); //만약 3번째가 checked 된다면 txt폰트를 => bold로 바꿔준다
        }
        if(fot[4].checked){
            txt = txt.italics(); //만약 4번째가 checked 된다면 txt폰트를 => italics로 바꿔준다
        }
        if(fot[5].checked){
            txt = txt.sup(); //만약 5번째가 checked 된다면 txt폰트를 => sup로 바꿔준다
        }
        if(fot[6].checked){
            txt = txt.sub(); //만약 6번째가 checked 된다면 txt폰트를 => sub로 바꿔준다
        }
        if(fot[7].checked){
            txt = txt.toLowerCase(); //만약 7번째가 checked 된다면 txt폰트를 => toLowerCase로 바꿔준다
        }
        if(fot[8].checked){
            txt = txt.toUpperCase(); //만약 8번째가 checked 된다면 txt폰트를 => toUpperCase로 바꿔준다
        }
        a.innerHTML = txt;  // 받은 txt값 출력하기
        
      }
    </script>
  </head>

<body>
  <input id = "txt" type="text" name=txt>
  <input type ="button" value="미리보기" onclick="findText()"></button> <br> <!-- 미리보기 버튼 생성-->
  <a>색상:
    </a><select id="color">  <!--폰트 컬러 지정하기-->
      <option value="red">빨강</option>
      <option value="green">초록</option>
      <option value="yellow">노랑</option>
    </select>
    <br>
  <a>크기:
    <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>
    </select>
  </a>
  <br> <!-- 폰트 옵션 -->
  <input name = "fonts" type = "checkbox" value="취소선">취소선
  <input name = "fonts" type = "checkbox" value="크게">크게
  <input name = "fonts" type = "checkbox" value="작게">작게
  <input name = "fonts" type = "checkbox" value="두껍게">두껍게
  <input name = "fonts" type = "checkbox" value="기울임">기울임
  <br>
  <input name = "fonts" type = "checkbox" value="위첨자">위첨자
  <input name = "fonts" type = "checkbox" value="아래첨자">아래첨자
  <input name = "fonts" type = "checkbox" value="소문자로">소문자로
  <input name = "fonts" type = "checkbox" value="대문자로">대문자로
  <br>
  <span id="print"></span>
  
  
</body>
</html>

'HTML' 카테고리의 다른 글

JavaScript 실습 : 회원가입 정규표현식  (0) 2021.03.04
HTML Day1  (0) 2021.03.01
'HTML' Related Articles more