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

Question

我使用 Javascript 和 PHP 制作了一个学习工具。段落中有一个 shows/hides 关键字的开关，因此用户可以在心理上 "fill in the blanks".

到目前为止，我是如何做到这一点的，所有关键字都带有下划线，并且我在 u 标签中使用 DOM select 或 select 所有 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>

这按预期工作 - "keywords" 被删去，文档的流程不受影响，因为关键字仍然占用与正常情况相同的 space。

一个缺点是在"keywords"特别长的段落中，段落的行结构被打乱，看起来文本只是在space中随机浮动。如果我能以某种方式改变可见性，使关键字中的单词被隐藏并且文本装饰（下划线）仍然显示，这将是可以解决的。这样就保留了行结构。

我想过用Javascript将关键字中的每个字符都替换为下划线，但是又弹出了两个问题。一件事是即使字符数保持不变，宽度也可能会改变。例如，"apple" 与“______”的物理长度不同。这并不理想，因为文档流会发生变化。第二个问题是，我想不出有什么方法可以在将关键字转换为下划线后取回关键字。

一种解决方法是不将可见性更改为 "hidden"，我可以将背景颜色更改为与文本相同的颜色。这挡住了文本，但行结构和文档流都被保留了下来。但是，我确实希望找到一种方法来实现我最初的想法，因此欢迎任何建议！

更新：我不想在关键字中添加任何额外的 div。用户可以使用富文本编辑器添加新条目，因此声明关键字就像在文本编辑器中加下划线一样简单。

Answer 1

我可能会使用您的第二种方法来实现它。将文本颜色设置为与背景相同，然后为元素添加底部边框。保留间距并允许您通过突出显示该行来快速检查您是否正确。此外，如果您为关键字包装元素提供一个 class，您可以轻松地切换隐藏文本的颜色，并保留下划线，以便您可以看到发生了什么变化。

div {
  color: black;
}
span {
  color: white;
  text-decoration: none;
  border-bottom: 2px solid green;
}

<div>
This <span>is hidden</span> with an underline
</div>

Answer 2

您可以 css 添加一个伪元素而不是使用隐藏的可见性，使用颜色：透明，像这样：

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

Answer 3

您必须想办法让 div 位于隐藏文本下方，但您可以使用以下代码创建具有文本宽度的 div。我可能会在回答后回来并找到一种定位 div.

的方法

在您的 HTML 中，假设您有一个要隐藏的短语 foo bar。您将使用以下代码为其分配一个 ID：<p id="foo">foo bar</p>

这里是 CSS:

#foo {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

然后在你的Javascript中，你可以使用下面的代码：

var fontSize = 20;                          //this defines a font size   
var foo = document.getElementById("foo");
foo.style.fontSize = fontSize;              //this sets the style as the font size
var width = (foo.clientWidth) + "px"

var div = document.createElement("div");
div.style.width = width;
div.style.height = 2px;
div.style.background = "red";      //makes the underline visible

document.getElementById("main").appendChild(div);

从这里开始，您可以根据需要重新定位 div，使其显示在文本下方。这样，div 就是文本的确切长度。

另一种解决方案是使用等宽字体，然后手动计算宽度。

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

How to change text to invisible, but still show underline?

javascript

css

dom

visibility

getelementsbytagname