이번 포스팅에서는 자바스크립트로 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>
실행방법은 위의 텍스트박스에 문구를 입력하고 바꿀 글자의 색상, 크기, 속성을 설정한 뒤 미리보기를 누르시면 됩니다.
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 (0) | 2018.07.07 |
|---|---|
| [JavaScript] Alert(경고창), Prompt(입력창), Confirm(선택창) (2) | 2018.07.06 |
| [JavaScript] 회원가입 폼 유효성검사 (정규식) (1) | 2018.07.04 |
| [JavaScript] 주민등록번호 유효성 검사 (2) | 2018.07.03 |