如何屏蔽和取消屏蔽 HTML 標題文本

Question

在我的 html 文檔中，我有一個h3標題，其中文本是貨幣值。 在用戶單擊按鈕以取消屏蔽之前，我不希望此貨幣價值可見。

我如何有一個按鈕來屏蔽或取消屏蔽此 HTML 元素並仍然保留貨幣格式？

Answer 1

設置h3的默認display: none; ，然后將onclick屬性設置為一個函數，並使該函數執行function show(){document.getElementById('show_button').style.display= 'block';}

Answer 2

創建一個事件來show()或hide()這個值。 您還可以將文本插入跨度並修改其 css。

Answer 3

您需要為要混淆的文本添加一個跨度，然后使用 js 選擇器document.querySelector()或類似的選擇此跨度，並向其添加自定義樣式，如隱藏：

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

在你的 CSS 上添加一個隱藏類：

.hidden {
    visibility: hidden;
}

Answer 4

您可以使用三元運算符獲得Mattia建議的相同結果。

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