我如何屏蔽和取消屏蔽 HTML 标头文本答案

【问题标题】：How do i mask and unmask HTML header text我如何屏蔽和取消屏蔽 HTML 标头文本
【发布时间】：2020-01-05 20:55:19
【问题描述】：

在我的 html 文档中，我有一个 h3 标头，其中的文本是货币值。在用户单击按钮取消屏蔽之前，我不希望此货币价值可见。

如何使用按钮来屏蔽或取消屏蔽此 HTML 元素并仍保留货币格式？

【问题讨论】：

使用.hide()和.show()。
面具是什么意思？你的意思是用*s替换吗？另外，请提供您已经尝试过的代码。

标签： javascript jquery html css asp.net-mvc

【解决方案1】：

将h3的默认设置为display: none;，然后将onclick属性设置为一个函数，并使函数做 function show(){document.getElementById('show_button').style.display= 'block';}

【讨论】：

【解决方案2】：

为show() 或hide() 这个值创建一个事件。您还可以将文本插入跨度并修改其 css。

【讨论】：

【解决方案3】：

您需要为要混淆的文本添加一个跨度，然后使用 js 选择器 document.querySelector() 或类似的选择此跨度，并为其添加自定义样式，如隐藏：

const span = document.querySelector('.currencySpan');
span.addEventListener('click', function() {
span.classList.toggle('hidden');
});

在你的 CSS 上添加一个隐藏类：

.hidden {
    visibility: hidden;
}

【讨论】：

【解决方案4】：

您可以达到Mattia 建议使用三元运算符的相同结果。

const h3 = document.querySelector('.currencyMaskHeader');

document.querySelector('.maskToggleButton').onclick = function() {
  h3.style.visibility === 'visible' ?
    h3.style.visibility = 'hidden' :
    h3.style.visibility = 'visible';
}

【讨论】：