[DOM_Style] JS - lineHeight 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 = 글씨 수직중앙정렬 = 라인하이트속성, 상속O)

lineHeight 예제 - 텍스트 라인 높이 설정.

 

<style>

#hz {border:1px solid silver;}

</style>

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

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

<script>

function homzzang() {

  document.getElementById("hz").style.lineHeight = "30px";

}

</script>

결과보기

lineHeight 정의 

 

텍스트 라인 높이 설정/반환.

 

---

 

1.

기본값: normal

반환값: 를 나타내는 문자열

CSS속성: line-height
CSS버전: CSS1

2.

모든 브라우저 지원. 

 

lineHeight 구문 

 

[접근]

object.style.lineHeight 

 

[설정]

object.style.lineHeight = "normal|number|length|%|initial|inherit"

 

---

[속성값]

 

normal
기본 간격 (기본값)

 

숫자  ★
숫자 X  폰트 크기  =  줄 간격

 

px, pt, cm 등의 길이 단위
숫자 클수록 간격 넓어짐 (음수 불가능)

 

% 단위 ★
폰트 크기의 % (백분율)

initial

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

inherit
부모 요소의 속성값을 상속

 

lineHeight 예제 - 텍스트 라인 높이 반환.

 

<div id="hz" style="width: 200px; line-height:500%;">

홈짱닷컴 Homzzang.com

홈페이지 제작관리 강의

</div>

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

<script>

function homzzang() {

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

}

</script>

 

결과보기