[DOM_Style] JS - fontStyle 속성 - 글자모양 (= font-style속성 = 글씨체모양 = 글씨모양 = 글자모양 = 서체모양 = 글꼴모양 = 폰트스타일) + (이탤릭체, 기울임체) (상속 O)

fontStyle 예제 

 

<p id="hz">홈짱닷컴 Homzzang.com</p>

<button type="button" onclick="homzzang()">클릭</button>

 

<script>

function homzzang() {

  document.getElementById("hz").style.fontStyle = "italic";

}

</script>

 

결과보기

fontStyle 정의 

 

글자 스타일 반환/설정.

 

---

 

1.

기본값: normal

 

2.

모든 브라우저 지원.

fontStyle 구문 

 

[반환] 

object.style.fontStyle

 

[설정]

object.style.fontStyle = "속성값"

 

---

 

[속성값]

 

normal
일반 폰트 (기본값)

 

italic
이탤릭체

 

oblique
기울임체

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모 요소의 스타일을 상속 

 

---

 

[반환값]

요소에서 텍스트의 글꼴 스타일을 나타내는 문자열.

 

fontStyle 예제 - select 선택값으로 폰트스타일 지정

 

<p id="hz">홈짱닷컴 Homzzang.com</p>

<select onchange="homzzang(this);" size="3">

  <option>normal</option>

  <option>italic</option>

  <option>oblique</option>

</select>

 

<script>

function homzzang(st) {

  var styleValue = st.options[st.selectedIndex].text;

  document.getElementById("hz").style.fontStyle = styleValue;

}

</script>

 

결과보기

fontStyle 예제 - 폰트스타일 반환

 

<p id="hz" style="font-style:italic;">홈짱닷컴 Homzzang.com</p>

<button type="button" onclick="homzzang()">클릭</button>

 

<script>

function homzzang() {

  alert(document.getElementById("hz").style.fontStyle);

}

</script>

 

결과보기