[DOM_Style] JS - textTransform 속성 - 텍스트 대소문자변환 (= textTransform속성 = 텍스트트랜스폼속성)

textTransform 예제 - 설정

 

<p id="hz">homzzang.com is a best site.</p>

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").style.textTransform = "capitalize";

}

</script>

 

결과보기 

textTransform 정의 

 

텍스트 대소문자 설정/반환. 

 

---

 

 1.

기본값: none

반환값: text-transform 나타내는 문자열

CSS속성: text-trnasform
CSS버전: CSS1

2.

모든 브라우저 지원. 

 

textTransform 구문 

 

[반환]

object.style.textTransform 

 

[설정]

object.style.textTransform = "none|capitalize|uppercase|lowercase|initial|inherit"

 

---

 

[속성값]

 

none

텍스트 변환설정 안 함. (기본값) 

 

capitalize

각 단어의 첫 번째 글자만 대문자로 변환. 

 

uppercase

대문자로 변환. 

 

lowercase

소문자로 변환.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모 요소의 속성값 상속.

 

textTransform 예제 - 반환

 

<p id="hz" style="text-transform:lowercase;">Homzzang.com is a Best Site.</p>

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  alert(document.getElementById("hz").style.textTransform);

}

</script>

 

결과보기