Click to return to the DHTML, HTML     
text-justify Attribute | ...     tFoot Property     DHTML Properties    
Web Workshop  |  DHTML, HTML & CSS

text-transform Attribute | textTransform Property


Sets or retrieves the rendering of the text in the object.

Syntax

HTML{ text-transform: sTransform }
Scriptingobject.style.textTransform [ = sTransform ]

Possible Values

sTransform String that specifies one of the following values:
noneText is not transformed.
capitalize Transforms the first character of each word to uppercase.
uppercaseTransforms all the characters to uppercase.
lowercaseTransforms all the characters to lowercase.

The property is read/write with a default value of none; the cascading style sheets (CSS) attribute is inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see Dynamic Properties.

Example

The following examples use the text-transform attribute and the textTransform 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.

Sample Code

<STYLE>
    .transform1 { text-transform:uppercase }
    .transform2 { text-transform:lowercase }
    .transform3 { text-transform:none }
</STYLE>
</HEAD>
<BODY> 
<DIV STYLE="font-size:14" 
    onmouseover="this.className='transform1'" 
    onclick= "this.className='transform2'"
    ondblclick="this.className='transform3'"> 
:
</DIV>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

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

<DIV STYLE="font-size:14"
    onmouseover="this.style.textTransform='uppercase'"
    onmouseout="this.style.textTransform='lowercase'"
    onclick="this.style.textTransform='none'">
:
</DIV>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, Hn, HTML, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP


Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.