Export (0) Print
Expand All

text-transform property

Specifies the rendering of the text in the object.

CSS 2.1, Section 5.4.5Internet Explorer 9

 

Syntax

text-transform: capitalize | uppercase | lowercase | none

Property values

A variable of type String that specifies or receives one of the following values:

none

Default. Text is not transformed.

capitalize

Transforms the first character of each word to uppercase.

uppercase

Transforms all the characters to uppercase.

lowercase

Transforms all the characters to lowercase.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

Examples

The following examples use the text-transform attribute and the text-transform property to transform a block of text from lower case to upper case when the user moves the mouse over the text. The text transforms back to lower case when the user clicks the text.

This example uses three calls to an embedded (global) style sheet to transform the text.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/text-transform.htm


<!DOCTYPE html>
<html>
<head>
  <title>text-transform</title>
  <style>
    .transform1 {
      text-transform: uppercase;
    }

    .transform2 {
      text-transform: lowercase;
    }

    .transform3 {
      text-transform: none;
      color: green;
    }
  </style>
</head>

<body>
  <div style="font-size: 14px" onmouseover="this.className='transform1'"
    onclick="this.className='transform2'" ondblclick="this.className='transform3'">
    Run your mouse over me to<br>
    capitalize all letters of each word.<br>
    Click me to make all letters lowercase.<br>
    Double-click me to return to the default setting but in green.<br>
    In this example we use inline scripting to call<br>
    stylesheet classes from mouse events. 
  </div>
</body>
</html>

This example uses inline scripting to transform the text when different mouse events occur.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/textTransform.htm


<!DOCTYPE html>
<html>
<head>
  <title>textTransform</title>
</head>

<body>
  <!-- HERE WE CALL THE FUNCTIONS TO HANDLE MOUSE EVENTS: -->
  <div style="font-size: 14px" onmouseover="this.style.textTransform='uppercase'"
    onmouseout="this.style.textTransform='lowercase'"
    onclick="this.style.textTransform='none'">
    Run your mouse over this text to
    <br>
    capitalize all letters of each word.<br>
    Your mouseout will result in all the letters being made lowercase.<br>
    Click to return to default the setting.
  </div>
  <script>
    var oTxt = document.getElementById('oTxt');

    function changeText1() {
      oTxt.style.textTransform = "uppercase";
    }
    function changeText2() {
      oTxt.style.textTransform = "lowercase";
    }
    function changeText3() {
      oTxt.style.textTransform = "none";
    }
  </script>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

Show:
© 2014 Microsoft