Home Library Learn Downloads Support Community
Sign in | United States - English | |
5 out of 6 rated this helpful - Rate this topic

text-decoration Attribute | textDecoration Property

Gets or sets a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations.

Syntax

CSS { text-decoration : sDecoration }
Scripting [ sDecoration = ] object.style.textDecoration

Possible Values

sDecoration String that specifies or receives one of the following values.
none
Default. Text has no decoration.
underline
Text is underlined.
overline
Text has a line over it.
line-through
Text has a line drawn through it.
blink
Not implemented.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of none. The Cascading Style Sheets (CSS) attribute is not inherited.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.

Remarks

The default value is different for the following tags.

  • Default value is underline for a when used with href, u, and ins.
  • Default value is line-through for strike, s, and del.

If the value none is placed at the end of the values, all values are cleared. For example, setting { text-decoration: underline  overline  blink  none} causes none of the decorations to render.

If the object has no text (for example, the img object in HTML) or is an empty object (for example, "<EM></EM>"), this property has no effect.

If you set the textDecoration attribute to none on the body object, the a objects are still underlined. To remove the underline from the a objects, either set the style inline or use a as a selector in the global style sheet.

Specifying the textDecoration property for block elements affects all inline children. If it is specified for, or affects, an inline element, it affects all boxes generated by the element.

The overline and blink possible values are available as of Microsoft Internet Explorer 4.0. Although blink is exposed, it is not rendered.

In Windows Internet Explorer 8 and later, when the textDecoration property is set to overline and/or underline, the line will remain at the same vertical level and the same thickness across all child elements of the parent element on which the text decoration has been set. (This does not apply to the line-through value.) In Internet Explorer 7 and earlier, the text decoration adjusts to correspond to the size and thickness of each child element.

Examples

The following examples use the text-decoration attribute and the textDecoration property to decorate text within the object.

This example uses an inline style sheet to draw a line through the text within the object.

Copy 

<div style="text-decoration: line-through">
...
</div>

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

This example uses inline scripting to underline the text within the span object when the user moves the mouse over the span.

Copy 

<span style="font-size: 14px" onmouseover="this.style.textDecoration='underline'" 
    onclick="this.style.textDecoration='overline'" 
    ondblclick="this.style.textDecoration='line-through'">
...
</span>

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

This example demonstrates that, though textDecoration is not inheritable, its child elements are formatted with the same decoration (for instance, an underline) as their parent. Even if descendant elements have different color values, the color of the decoration will remain the same as that of the parent element.

Copy 

<html>

<head>
<style type="text/css">
.redunderline {
    color: red;
    text-decoration: underline;
}
.blueoverline {
    color: blue;
    text-decoration: overline;
}
</style>
</head>

<body>

<div class="redunderline">
    This <b>div</b> has text decoration set to underline,
    <span class="blueoverline">but this <b>span</b> has it set to overline.</span> 
    The <b>div</b> continues here.</div>

</body>

</html>

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

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1).

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CSSStyleDeclaration, currentStyle, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, hn, HTML, I, INPUT type=button, INPUT type=file, 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, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ