개체 속에서 문자의 변환 표현 방식을 반환하거나 설정한다.

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

: (속성 문자열)
스타일 속성은 개체 속에서 문자의 변환 표현 방식을 나타내는 문자열이다.

none 디폴트이며, 텍스트가 변환되지 않는다.
capitalize 각 단어의 첫글자가 대문자로 변환된다.
uppercase 모든 글자가 대문자로 변환된다.
lowercase 모든 글자가 소문자로 변환된다.

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

CSS(Cascading Style Sheets) 애트리뷰트는 상속된다.

적용
개체scriptCSS IE 버전
참조

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


divObj.style.textTransform
divObj.style.textTransform=
결과 표시창

textTransform 속성을 사용하여 대문자, 소문자로 변환한다.

<SCRIPT>
function doShow(job){
  if (job==0) divObj.style.textTransform='none';
  if (job==1) divObj.style.textTransform='uppercase';
  if (job==2) divObj.style.textTransform='lowercase';
  if (job==3) divObj.style.textTransform='capitalize';
  str='divObj.style.textTransform=<FONT color=blue>'+divObj.style.textTransform+'</FONT>';
  showA.innerHTML=str;
}
</SCRIPT>
<BODY>
<DIV id="divObj" style="color:blue;font-size:16">
divObj.style.textTransform
</DIV>
divObj.style.textTransform=
<BUTTON onclick="doShow(0)" style="width:100">none</BUTTON>
<BUTTON onclick="doShow(1)" style="width:100">uppercase</BUTTON>
<BUTTON onclick="doShow(2)" style="width:100">lowercase</BUTTON>
<BUTTON onclick="doShow(3)" style="width:100">capitalize</BUTTON>
<DIV id=showA>결과 표시창</DIV>

div2Obj.className, div2Obj.style.textTransform
div2Obj.style.textTransform=
결과 표시창

위 예제와 같으나 여기서는 className을 호출하여 textTransform 속성을 변경시킨다.

<STYLE>
.tsUpper { text-transform:uppercase }
.tsLower { text-transform:lowercase }
.tsNone { text-transform:none }
.tsCapt { text-transform:capitalize }
</STYLE>
<SCRIPT>
function doShowClass(job){
  if (job==0) div2Obj.className='tsNone';
  if (job==1) div2Obj.className='tsUpper';
  if (job==2) div2Obj.className='tsLower';
  if (job==3) div2Obj.className='tsCapt';
  str='div2Obj.className=<FONT color=blue>'+div2Obj.className+'</FONT><BR>';
  str+='div2Obj.currentStyle.textTransform=<FONT color=blue>'+div2Obj.currentStyle.textTransform+'</FONT><BR>';
  showB.innerHTML=str;
}
</SCRIPT>
<BODY>
<DIV id="div2Obj" style="color:blue;font-size:16">
div2Obj.className, div2Obj.style.textTransform
</DIV>
div2Obj.style.textTransform=
<BUTTON onclick="doShowClass(0)" style="width:100">none</BUTTON>
<BUTTON onclick="doShowClass(1)" style="width:100">uppercase</BUTTON>
<BUTTON onclick="doShowClass(2)" style="width:100">lowercase</BUTTON>
<BUTTON onclick="doShowClass(3)" style="width:100">capitalize</BUTTON>
<DIV id=showB>결과 표시창</DIV>