[英]How to change text to invisible, but still show underline?
我使用 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。 用户可以使用富文本编辑器添加新条目,因此声明关键字就像在文本编辑器中加下划线一样简单。
您可以使用 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>
我可能会使用您的第二种方法来实现这一点。 将文本颜色设置为与背景相同,然后为元素添加底部边框。 保留间距,让您只需突出显示该行即可快速检查您是否正确。 此外,如果您给关键字包装元素一个类,您可以轻松地切换隐藏文本的颜色,并保留下划线,以便您可以看到发生了哪些变化。
div { color: black; } span { color: white; text-decoration: none; border-bottom: 2px solid green; }
<div> This <span>is hidden</span> with an underline </div>
您必须找到某种方法将 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 就是文本的确切长度。
另一种解决方案是使用等宽字体,然后手动计算宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.