• Q&A
  • 회원가입
  • 로그인

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

1,414  

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>

 

결과보기



찾아주셔서 감사합니다. Since 2012