목차
fontWeight 예제 - 글자 굵기 설정
fontWeight 정의
fontWeight 구문
fontWeight 예제 - 글자 굵기 선택 메뉴
fontWeight 예제 - 글자 굵기 반환
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>
결과보기
주소 복사
랜덤 이동