How To Set Text Decoration In Javascript

textDecoration mode property

Browser support:

Specifies or returns the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text.

Syntax:

object.textDecoration;

Y'all tin find the related objects in the Supported by objects section beneath.

This belongings is read/write.

Possible values:

The type of this property is cord.

Clarification of values:

-moz-anchor-decoration

Utilize default anchor ornamentation.

blink

The text content of the element blinks.

inherit

Takes the value of this property from the computed style of the parent element.

line-through

The text content of the element is displayed with a line through the middle.

none

No text ornament is used.

overline

The text content of the element is displayed with a line at the top.

underline

The text content of the chemical element is underlined.

Default: none.

Example HTML code i:

This case illustrates the utilise of the text-decoration property:

                      <                      head                      >                                                                  <                      way                      >                                                                  .example                                              {                                            text-ornamentation                      :                                              overline line-through                      ;         }                                            </                      style                      >                                                                  </                      head                      >                                                                  <                      trunk                      >                                                                  <                      a                                                                  class                      =                      "case"                      >                      Text decoration: overline line-through                      </                      p                      >                                                                  </                      body                      >

Did you find this example helpful? yes no

Example HTML code ii:

This example illustrates the use of the textDecoration property in JavaScript:

                      <                      caput                      >                                                                  <                      script                                                                  blazon                      =                      "text/javascript"                      >                                                                  function                                              ChangeTextDecoration (elem) {                                            var                                              anchor =                                            document                      .                      getElementById                                              (                      "myAnchor"                      );                                            var                                              checkboxes =                                            certificate                      .                      getElementsByName                                              (                      "checkboxs"                      );                                            var                                              decorValue =                                            ""                      ;                                            // Checks all checkbox state                                                                                        for                                              (                      var                                              i =                                            0                      ; i < checkboxes.                      length                      ; i++) {                                            if                                              (checkboxes[i].                      checked                      ) {                    decorValue += checkboxes[i].                      value                                              +                                            " "                      ;                 }             }                                            // If none is checked all other checked out                                                                                        var                                              noneCh =                                            document                      .                      getElementsByName                      (                      "nonecheck"                      );                                            if                                              (noneCh[                      0                      ].                      checked                      ) {                                            for                                              (                      var                                              i =                                            0                      ; i < checkboxes.                      length                      ; i++) {                     checkboxes[i].                      checked                                              =                                            false                      ;                 }                 decorValue =                                            "none"                      ;             }             anchor.                      fashion                      .                      textDecoration                                              = decorValue;         }                                            </                      script                      >                                                                  </                      head                      >                                                                  <                      body                      >                                                                  <                      a                                                                  id                      =                      "myAnchor"                      >                      Text ornament sample                      </                      a                      >                                                                  <                      br                                                                  /><                      br                                                                  />                                              Change text-decoration value:                                            <                      br                                                                  />                                                                  <                      input                                                                  type                      =                      "checkbox"                                                                  name                      =                      "checkboxs"                                                                  value                      =                      "blink"                                                                  onclick                      =                      "ChangeTextDecoration ();"                      />                      blink                      <                      br                                                                  />                                                                  <                      input                                                                  type                      =                      "checkbox"                                                                  proper name                      =                      "checkboxs"                                                                  value                      =                      "line-through"                                                                  onclick                      =                      "ChangeTextDecoration ();"                      />                      line-through                      <                      br                                                                  />                                                                  <                      input                                                                  type                      =                      "checkbox"                                                                  name                      =                      "checkboxs"                                                                  value                      =                      "overline"                                                                  onclick                      =                      "ChangeTextDecoration ();"                      />                      overline                      <                      br                                                                  />                                                                  <                      input                                                                  type                      =                      "checkbox"                                                                  proper name                      =                      "checkboxs"                                                                  value                      =                      "underline"                                                                  onclick                      =                      "ChangeTextDecoration ();"                      />                      underline                      <                      br                                                                  />                                                                  <                      input                                                                  type                      =                      "checkbox"                                                                  name                      =                      "nonecheck"                                                                  onclick                      =                      "ChangeTextDecoration ();"                                                                  />                      none                                            </                      trunk                      >

Did you find this example helpful? yes no

Supported past objects:

CSSStyleDeclaration, htmlElement.currentStyle, htmlElement.runtimeStyle, htmlElement.style

HTML elements:

a, abbr, acronym, accost, b, basefont, bdo, big, blink, blockquote, torso, push button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, label, fable, li, listing, marquee, menu, nobr, ol, optgroup, pick, p, plaintext, pre, q, rt, ruby, s, samp, select, pocket-sized, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp