HTML DOM Style textDecorationStyle 속성 사용법과 예제

DOM style의 textDecorationStyle 속성은 HTML 문서 내 요소 텍스트에 적용된 텍스트 장식 선(text-decoration line)이 화면에 어떤 형태로 표시될지를 가져오거나 변경하는 데 사용됩니다. 즉, 밑줄이나 취소선 같은 장식 선을 실선, 이중선, 점선, 물결선 등 다양한 스타일로 지정할 수 있습니다.

문법(Syntax)

textDecorationStyle 속성의 기본 문법은 다음과 같습니다.

1. 속성 값 반환하기

object.style.textDecorationStyle

2. 속성 값 설정하기

object.style.textDecorationStyle = "value"

속성 값(Value)

textDecorationStyle 속성에 지정할 수 있는 값은 다음과 같습니다.

값	설명
inherit	부모 요소로부터 해당 속성 값을 상속받습니다.
initial	해당 속성 값을 브라우저 기본값으로 초기화합니다.
solid	장식 선을 일반적인 실선(solid) 형태로 표시합니다.
double	장식 선을 두 줄이 겹친 이중선(double) 형태로 표시합니다.
dotted	장식 선을 점이 나열된 도트(dotted) 형태로 표시합니다.
dashed	장식 선을 짧은 대시가 이어진 파선(dashed) 형태로 표시합니다.
wavy	장식 선을 물결 모양(wavy)으로 표시합니다.

예제(Example)

다음은 style textDecorationStyle 속성을 활용한 실제 예제 코드입니다. 버튼을 클릭하면 단락 텍스트의 밑줄 스타일이 물결선(wavy)으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
       color: #000;
       background: lightblue;
       height: 100vh;
    }
    p {
       margin: 1.5rem auto;
       text-decoration-line: underline;
    }
    .btn {
       background: #db133a;
       border: none;
       height: 2rem;
       border-radius: 2px;
       width: 40%;
       display: block;
       color: #fff;
       outline: none;
       cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style textDecorationStyle Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</p>
<button onclick="add()" class="btn">Change textDecorationStyle</button>
<script>
    function add() {
       document.querySelector('p').style.textDecorationStyle = "wavy";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 아래와 같은 결과가 출력됩니다.

HTML DOM Style textDecorationStyle 속성 사용법과 예제

화면의 "Change textDecorationStyle" 버튼을 클릭해 보세요. 클릭하는 순간 자바스크립트 함수가 실행되어 단락 텍스트에 적용된 밑줄이 물결선(wavy) 스타일로 바뀌는 것을 확인할 수 있습니다.

HTML DOM Style textDecorationStyle 속성 사용법과 예제

이처럼 textDecorationStyle 속성을 활용하면 자바스크립트만으로 텍스트 장식 선의 모양을 동적으로 제어할 수 있어, 사용자 인터랙션에 따라 시각적 효과를 쉽게 구현할 수 있습니다.