HTML DOM style textDecorationLine 속성 – 텍스트 장식선 종류 설정하기

HTML DOM의 style textDecorationLine 속성은 HTML 문서에서 요소의 텍스트를 장식하는 선의 종류를 가져오거나 변경할 때 사용합니다. 이 속성을 활용하면 자바스크립트만으로 텍스트에 밑줄, 윗줄, 취소선 등을 동적으로 적용하거나 제거할 수 있습니다.

문법(Syntax)

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

1. 값 가져오기

object.style.textDecorationLine

2. 값 설정하기

object.style.textDecorationLine = "value"

속성 값(Value)

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

값	설명
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
initial	이 속성 값을 기본(default) 값으로 설정합니다.
none	장식선 없는 일반적인 텍스트를 나타냅니다.
underline	텍스트 아래에 선을 표시합니다.
overline	텍스트 위에 선을 표시합니다.
line-through	텍스트 중앙을 관통하는 선(취소선)을 표시합니다.

예제(Example)

다음은 style textDecorationLine 속성의 사용 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        margin: 1.5rem auto;
        text-decoration-line: line-through;
    }
    .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 textDecorationLine 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 textDecorationLine</button>
<script>
    function add() {
        document.querySelector('p').style.textDecorationLine = "underline";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM style textDecorationLine 속성 – 텍스트 장식선 종류 설정하기

초기 상태에서는 CSS에 의해 단락 텍스트에 취소선(line-through)이 적용되어 있는 것을 확인할 수 있습니다.

여기서 “Change textDecorationLine” 버튼을 클릭하면 자바스크립트가 실행되어 단락 텍스트의 장식선이 밑줄(underline)로 변경됩니다.

HTML DOM style textDecorationLine 속성 – 텍스트 장식선 종류 설정하기

이처럼 textDecorationLine 속성을 사용하면 버튼 클릭 같은 사용자 이벤트에 반응하여 텍스트 장식선을 실시간으로 제어할 수 있어, 동적인 웹 UI를 구현할 때 유용하게 활용됩니다.