HTML DOM 스타일 textDecoration 속성

DOM 스타일 textDecoration 속성은 HTML 문서의 요소 텍스트에 하나 이상의 장식을 반환하고 적용합니다.

구문

다음은 구문입니다 -

textDecoration 반환

object.style.textDecoration

textDecoration 수정

object.style.textDecoration = “value”

값

여기서 값은 -

일 수 있습니다.

값	설명
상속	상위 요소에서 이 속성 값을 상속합니다.
초기	이 속성 값을 기본값으로 설정합니다.
없음	줄이 없는 텍스트를 의미하는 일반 텍스트를 나타냅니다.
밑줄	텍스트 아래에 줄을 설정합니다.
밑줄	텍스트 위에 줄을 설정합니다.
라인 스루	텍스트에 줄을 설정합니다.

예시

스타일 textDecoration 속성의 예를 살펴보겠습니다 -

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

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 스타일 textDecoration 속성

"텍스트 장식 설정을 클릭합니다. " 버튼을 눌러 단락 텍스트에 밑줄을 설정합니다.

HTML DOM 스타일 textDecoration 속성