개체의 텍스트 중간선 긋기, 윗줄 긋기, 밑줄 긋기 등 장식 방법을 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 텍스트 중간선 긋기, 윗줄 긋기, 밑줄 긋기 등 장식 방법을 나타내는 문자열이다.

none 디폴트이며, 텍스트가 장식되지 않는다.
underline 텍스트에 밑줄이 그어진다.
overline 텍스트에 윗줄이 그어진다.
line-through 텍스트에 중간선이 그어진다.
blink 적용되지 않는다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 none이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

다음 태그들과는 디폴트 값이 다르다.

값 none이 제일 뒤에 있으면 모든 값들은 지워진다. 예를들어 {text-decoration:underline overline blink none}로 설정되면 none이 적용된다.

개체가 img퍼럼 텍스트를 갖고 있지 않거나, <DIV></DIV> 처럼 빈 문자열을 갖고 있으면 이 속성값은 무시된다.

body 개체에 textDecoration 애트리뷰트가 none으로 설정되더라도 a 개체에는 계속 밑줄이 나타난다. a 개체에 밑줄을 제거하려면 a 개체에 공통 스타일 textDecoration을 none으로 설정하여야한다.

블럭 엘레멘트에 textDecoration 속성을 설정하면 모든 인라인 자식들에도 적용된다. 인라인 엘레멘트에 지정하면 모든 자식 블럭엘레멘트에도 적용된다.

overline과 blink은 IE4.0 에서 사용될 수 있지만, blink는 표현되지 않는다.

적용
개체scriptCSS IE 버전
참조
textDecoration textDecorationBlink textDecorationLineThrough textDecorationNone textDecorationOverline textDecorationUnderline

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


장식 보이기 문자열
<DIV id="divObj" style="padding:5">장식 보이기 문자열</DIV>
<BUTTON onclick="divObj.style.textDecoration='none'">장식 없애기</BUTTON>
<BUTTON onclick="divObj.style.textDecoration='overline'">윗줄 긋기</BUTTON>
<BUTTON onclick="divObj.style.textDecoration='underline'">밑줄 긋기</BUTTON>
<BUTTON onclick="divObj.style.textDecoration='line-through'">중간줄 긋기</BUTTON>

용기 DIV 내용 U 엘레멘트 부분 SPAN 내용 앞부분
DIV 내용
SPAN 내용 뒷부분 
<DIV id="container" style="text-decoration:overline;background:ffe;border:solid 3 blue;margin:10;padding:10;">용기 DIV 내용
<U>U 엘레멘트 부분</U>
<SPAN style="text-decoration:underline;background:fef;border:solid 2 green;margin:10;padding:10;">SPAN 내용 앞부분
<DIV style="text-decoration:line-through;background:eff;border:solid 1 red;margin:10;padding:10;">DIV 내용</DIV>
SPAN 내용 뒷부분
</SPAN>
</DIV>
<SCRIPT>
str='container.style.textDecoration=<FONT color=red>'+container.style.textDecoration+'</FONT><BR>';
coll=container.all;
for (i=0;i< coll.length;i++){
  str+=' # '+i+', '+coll[i].nodeName+', <FONT color=red>'+coll[i].style.textDecoration+'</FONT>, ';
  str+='<FONT color=teal>'+coll[i].innerText+'</FONT><BR>';
}
document.write(str);
</SCRIPT>