如何将文本更改为不可见但仍显示下划线？

Question

我使用Javascript和PHP制作了学习工具。有一个开关可以显示/隐藏段落中的关键字，因此用户可以在脑海中“填空”。

到目前为止，我这样做的方式是所有关键字都带有下划线，并且我使用DOM选择器选择u标记中的所有innerHTML。

<p>
  Example sentence, <u>this</u> is a <u>keyword</u>.
</p>
<button onClick='hideKeywords()'>Hide Keywords</button>

<script>
  function hideKeywords() {
    var x = Array.from(document.getElementsByTagName('u'));
    for (var i = 0; i < x.length; i++) {
      x[i].style.visibility = "hidden";
    }
  }
</script>

这可以按预期的方式工作-“关键字”被清空，并且文档流不受影响，因为关键字仍然占用与它们通常占用的空间相同的空间。

一个缺点是，在“关键词”特别长的段落中，该段落的行结构被破坏，看起来文本只是在空间中随机浮动。如果我能以某种方式更改可见性，使关键字中的单词被隐藏并且文本装饰（下划线）仍然显示，则此方法将是可修复的。这保留了线结构。

我曾考虑过使用Javascript用下划线替换关键字中的每个字符，但又出现了两个问题。一件事是，即使字符数保持不变，宽度也可能会改变。例如，“ apple”与“ ______”的物理长度不同。这是不理想的，因为文档流程会发生变化。第二个问题是，在将关键字转换为下划线之后，我想不出任何办法来找回关键字。

一种解决方法是，将可见性更改为与文本相同的颜色，而不是将可见性更改为“隐藏”。这样可以阻止文本，但是保留行结构和文档流。但是，我确实希望找到一种方法来实现我的原始想法，因此任何建议都值得赞赏！

更新：我希望不要在关键字中添加任何其他div。用户可以使用富文本编辑器添加新条目，因此声明关键字就像在文本编辑器中加底线一样容易。

Answer 1

您可以通过css添加一个伪元素来做到这一点，而不是使用隐藏的可见性，而使用color：transparent，如下所示：

u{
  position:relative;
}
u::after{
  content: ' ';
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
  height:1px;
  background-color:#000;
}

并在脚本中

<script>
  function hideKeywords() {
    var x = Array.from(document.getElementsByTagName('u'));
    for (var i = 0; i < x.length; i++) {
      x[i].style.color= transparent;
    }
  }
</script>

https://codepen.io/anon/pen/ROoMaM