为什么JavaScript中的Underline功能不起作用？

Question

function underline() {

  var text = document.getElementById("note_header").style.textDecoration;

  if (text == 'normal') {
    document.getElementById("note_header").style.textDecoration = 'Underline';
  } else {
    document.getElementById("note_header").style.textDecoration = 'normal';
  }
}

<input id="btn" type="button" value="Underline" name="btn" onclick="underline()">

Answer 1

normal不是text-decoration的可接受值。请改用none。

function underline(){
  var text = document.getElementById("note_header").style.textDecoration;
  
  if (text !== 'underline'){
    document.getElementById("note_header").style.textDecoration = 'underline';
  } else{
    document.getElementById("note_header").style.textDecoration = 'none';
  }
}

<textarea id="note_header"  rows="3" cols="15">
That's my note
</textarea><br/>
<input id="btn" type="button" value="Underline" name="btn" onclick="underline()">

Answer 2

尝试一下

function underline(){
  var text = document.getElementById("note_header").style.textDecoration;
  if (text == 'none'){
    document.getElementById("note_header").style.textDecoration = 'Underline';
  } else{
    document.getElementById("note_header").style.textDecoration = 'none';
  }
}

<a href="#" id="note_header" style="text-decoration:none;">This is anchor</a>
<input id="btn" type="button" value="Underline" name="btn" onclick="underline()">