HTML - DOM Style Object textTransform Property

Quiz

HTML DOM Style Object textTransform property sets or returns the capitalization of text. It changes the text to uppercase, lowercase or to be capitalized.

Syntax

Set the textTransform property:

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

Get the textTransform property:

object.style.textTransform;

Property Values

Value	Description
none	It is the default value where no characters are transformed.
capitalize	It makes the first character of every word in capital letter.
uppercase	It converts all written text in upper case.
lowercase	It converts all written text in lower case.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the transformation of the text in the element.

Example of HTML DOM Style Object 'textTransform' Property

The following example transforms the written text to lowercase, uppercase and capitalise the texts.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textTransform Property
    </title>
</head>
<body>
    <p>
        Click to transform text.
    </p>
    <button onclick="fun()">Capitalize</button>
    <button onclick="funTwo()">Lowercase</button>
    <button onclick="funThree()">Uppercase</button>
    <p id="transform">
        Welcome to Tutorials Point.
    </p>
    <script>
        function fun() {
            document.getElementById("transform")
                .style.textTransform = "capitalize";
        }
        function funTwo() {
            document.getElementById("transform")
                .style.textTransform = "lowercase";
        }
        function funThree() {
            document.getElementById("transform")
                .style.textTransform = "uppercase";
        }
    </script>
</body>
</html>

Supported Browsers

Property
textTransform	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page