[DOM_Style] JS - fontWeight 속성 - 글자굵기 (= font-weight속성 = 폰트굵기 = 글씨체굵기 =글씨굵기 = 글자굵기 = 글씨두께 = 글자두께 = 서체굵기=글꼴굵기 = 폰트웨이트속성, 상속 O) ※ 폰트/글자 긁게

목차

1. fontWeight 예제 - 글자 굵기 설정
2. fontWeight 정의
3. fontWeight 구문
4. fontWeight 예제 - 글자 굵기 선택 메뉴
5. fontWeight 예제 - 글자 굵기 반환
6. fontWeight 예제 - 클릭 시 글자 굵게

fontWeight 예제 - 글자 굵기 설정

 

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

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

 

<script>

function homzzang() {

  document.getElementById("hz").style.fontWeight = "900";

}

</script>

 

결과보기

fontWeight 정의

 

글자(텍스트) 굵기 설정/반환.

 

---

 

1.

• 기본값: normal
• 반환값: 텍스트 굵기 나타내는 문자열.
• CSS속성: font-weight
• CSS버전: CSS1

2.

모든 브라우저 지원. 

 

fontWeight 구문

 

글자 굵기 반환 

object.style.fontWeight

 

글자 굵기 설정

object.style.fontWeight = "normal|lighter|bold|bolder|100~900|initial|inherit"

 

---

[속성값]

 

normal 
기본 굵기 (기본값) (= 400)

 

bold
굵은 서체 (= 700)

 

bolder 
상속된 굵기보다 더 굵은 서체

 

lighter 
상속된 굵기보다 더 얇은 서체

 

100 200 300 400 500 600 700 800 900 

얇음  ←   굵기   →  굵음  (※ 100 단위로 900까지 가능)

 

initial

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

 

inherit : 

부모 요소의 굵기를 상속 

 

fontWeight 예제 - 글자 굵기 선택 메뉴

 

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

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

  <option>normal</option>

  <option>bold</option>

  <option>bolder</option>

  <option>lighter</option>

  <option>100</option>

  <option>200</option>

  <option>300</option>

  <option>400</option>

  <option>500</option>

  <option>600</option>

  <option>700</option>

  <option>800</option>

  <option>900</option>

</select>

 

<script>

function homzzang(sel) {

  var sizeValue = sel.options[sel.selectedIndex].text;

  document.getElementById("hz").style.fontWeight = sizeValue;

}

</script>

 

결과보기

fontWeight 예제 - 글자 굵기 반환

 

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

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

 

<script>

function homzzang() {

  var sizeValue = document.getElementById("hz").style.fontWeight;

  alert(sizeValue);

}

</script>

 

결과보기

fontWeight 예제 - 클릭 시 글자 굵게

 

<span onclick=style.fontWeight='bold'>홈짱닷컴 Homzzang.com</span>

 

결과보기