HTML DOM 스타일 lineHeight 속성은 텍스트에서 줄 사이의 거리인 줄 높이를 설정하는 데 사용됩니다.
다음은 lineHeight 속성을 설정하는 구문입니다 -
object.style.lineHeight
다음은 lineHeight 속성을 반환하는 구문입니다 -
object.style.lineHeight = "normal|number|length|%|initial|inherit"
위의 값은 아래에 설명되어 있습니다. -
- 정상: 일반 라인 높이. 기본값입니다.
- 숫자: 줄 높이를 설정하기 위해 현재 글꼴 크기를 곱한 숫자
- 길이: 길이 단위의 줄 높이
- %: 현재 글꼴 크기의 줄 높이(%)
- 초기: 이 속성을 기본값으로 설정합니다.
- 상속: 부모 요소에서 이 속성을 상속합니다.
이제 DOM 스타일 lineHeight 속성을 구현하는 예를 살펴보겠습니다. -
예시
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<div id="myid">
Here, we have set demo text. Here, we have set demo text. Here, we have set demo text. Here,
we have set demo text. Here, we have set demo text. Here, we have set demo text. Here, we
have set demo text. Here, we have set demo text.
Here, we have set demo text. Here, we have set demo text. Here, we have set demo text. Here,
we have set demo text. Here, we have set demo text. Here, we have set demo text.
</div>
<br>
<button type="button" onclick="display()">Click to increase the line height</button>
<script>
function display() {
document.getElementById("myid").style.lineHeight = "3";
}
</script>
</body>
</html> 출력
이제 버튼을 클릭하여 라인 높이를 설정하십시오 -
