JavaScript에서 텍스트 장식(text-decoration)의 선 스타일을 지정하려면 textDecorationStyle 속성을 사용하면 됩니다. 이 속성을 활용하면 밑줄(underline), 이중선(double), 윗줄(overline) 등 다양한 선 스타일을 손쉽게 설정할 수 있습니다.
textDecorationStyle 속성이란?
textDecorationStyle 속성은 CSS의 text-decoration-style 속성에 대응하는 JavaScript DOM 속성으로, 텍스트에 적용된 장식 선의 모양을 결정합니다. 사용 가능한 주요 값은 다음과 같습니다.
- solid – 기본값인 일반 실선
- double – 두 줄로 된 이중선
- dotted – 점선
- dashed – 파선(대시선)
- wavy – 물결 모양의 선
예제 코드
아래 예제는 버튼을 클릭했을 때 JavaScript를 사용해 텍스트 장식 선의 색상을 빨간색으로, 스타일을 이중선(double)으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<div id = "myText" style = "text-decoration: underline;">
This is demo text.
</div>
<br>
<button onclick = "display()"> Set Text Decoration </button>
<script>
function display() {
document.getElementById("myText").style.textDecorationColor = "red";
document.getElementById("myText").style.textDecorationStyle = "double";
}
</script>
</body>
</html>코드 설명
위 코드의 동작 방식을 살펴보면 다음과 같습니다.
- myText라는 id를 가진 div 요소에 기본적으로 밑줄(underline) 스타일이 적용되어 있습니다.
- 버튼을 클릭하면 display() 함수가 실행됩니다.
- textDecorationColor 속성으로 선 색상을 빨간색(red)으로 변경합니다.
- textDecorationStyle 속성으로 선 스타일을 이중선(double)으로 변경합니다.
이처럼 JavaScript의 style 객체를 활용하면 페이지를 새로고침하지 않고도 동적으로 텍스트 장식 스타일을 변경할 수 있어, 사용자 인터랙션에 따른 UI 효과를 구현할 때 유용합니다.