Javascript Reference - HTML DOM Style textTransform Property

In CSS we can use text-transform to change the text to uppercase, lowercase or to capitalized letters.

The textTransform property sets or gets the capitalization of a text in Javascript.

Browser Support


`textTransform`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the textTransform property:

var v = object.style.textTransform

Set the textTransform property:

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

Property Values

Value	Description
none	No transform. Default
capitalize	uppercase the first letter of each word
uppercase	uppercase all letters
lowercase	lowercase all letters
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the text transformation
CSS Version	CSS1

Example

The following code shows how to capitalize text.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--  ww w . j  a va 2 s  .co m-->
    document.getElementById("myP").style.textTransform = "capitalize";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to uppercase all letters.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from ww w .  j  ava 2  s  . com-->
    document.getElementById("myP").style.textTransform = "uppercase";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the text transformation settings.


<!DOCTYPE html>
<html>
<body>
<!-- w w w  .  j  a v  a2  s  .  com-->
<p id="myP" style="text-transform:lowercase;">ASDF This Is An Example.</p>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myP").style.textTransform);
}
</script>

</body>
</html>

The code above is rendered as follows: