[JavaScript] Span태그의 속성(글꼴,색상,크기,스타일) 변경하기

이번 포스팅에서는 자바스크립트로 HTML Span태그의 글꼴,색상,크기,스타일을 변경시키는 방법에 대해 알아보도록 하겠습니다. 다양한 위젯의 Id를 활용해 활용해 span태그 안에있는 글자를 바꾸는 예제입니다. 다양하게 응용하셔서 활용해보세요.


Span태그의 속성 변경 예제

<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("fontStyle");
		
		
	    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.toLowerCase();
	    }
	    if(objOptions[8].checked){
		    targetString = targetString.toUpperCase();
	    }
		
	objResult.innerHTML = targetString;
    }
</script>

<table border="1" bgcolor="E6E9ED">
<body><tr>
    <td><input type="text" id="tbString"><input type="button" value="미리 보기" onclick="previewString()"></td>
</tr>
<tr>
    <td>색상:
       <select id="fontColor">
	    <option value="blue">파랑</option>
	    <option value="yello">노랑</option>
	    <option value="red">빨강</option>
       </select></td>
</tr>
<tr>
    <td>크기:
	<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>
	</select></td>
</tr>
<tr>
    <td><input type="checkbox" name="fontStyle" value="strike">취소선
	   <input type="checkbox" name="fontStyle" value="big">크게
	   <input type="checkbox" name="fontStyle" value="small">작게
	   <input type="checkbox" name="fontStyle" value="b">두껍게
	   <input type="checkbox" name="fontStyle" value="i">기울임</td>
</tr>
<tr>
    <td><input type="checkbox" name="fontStyle" value="strike">위첨자
	   <input type="checkbox" name="fontStyle" value="big">아래첨자
	   <input type="checkbox" name="fontStyle" value="small">소문자로
	   <input type="checkbox" name="fontStyle" value="b">대문자로
</td></tr>
</table>

<span id="result"></span>
</body>

실행방법은 위의 텍스트박스에 문구를 입력하고 바꿀 글자의 색상, 크기, 속성을 설정한 뒤 미리보기를 누르시면 됩니다. 


[JavaScript] 주민등록번호 유효성 검사

[JavaScript] 회원가입 폼 유효성검사 (정규식)

[JavaScript] 배경색 바꾸기

[JavaScript] Alert(경고창), Prompt(입력창), Confirm(선택창)


댓글(0)

Designed by JB FACTORY