html中设置替换文本,前端页面替换文本的方法和一些小技巧

在前端页面替换文本有几种做法，不假思索的答案通常是直接用JavaScript。但你有没有想过这完全可以用CSS实现呢？

背景

在前端页面上，有的时候我们需要根据用户行为，替换的显示文本。比如 “显示/隐藏”、“展开/收起”。这是一个很常见的功能，实现起来也没有太大的难度。

CSS Tricks 有一篇文章谈及“替换文本的五种方法”(Swapping Out Text, Five Different Ways)。在这篇文章里，作者总结了使用五种实现方法，并且在评论里和很多读者进行了一些讨论分析。我在这里总结一些值得注意的东西。

很常见的一个场景是，有一个按钮，其文本需要在 "show" "hide" 之前交互替换显示。html 示例如下：Hide

纯 Javascript/jQuery 实现

使用 Javascript 或者 使用 jQuery 都可以很轻易的实现这个功能。下面是作者给出的一个实现：$("button").on("click", function() {

var el = $(this);

if (el.text() == el.data("text-swap")) {

el.text(el.data("text-original"));

} else {

el.data("text-original", el.text());

el.text(el.data("text-swap"));

}

});

这段代码虽然看着较为臃肿，不过它确实是一个较好的实现。没