隐藏具体化 CSS 按钮答案

【问题标题】：Hide Materialize CSS button隐藏具体化 CSS 按钮
【发布时间】：2019-06-02 06:46:27
【问题描述】：

我想用 javascript 隐藏一个 materializeCSS 按钮。这是我的代码，但它没有隐藏按钮。它在标准 HTML 中有效，但在使用 materializeCSS 时无效。

<button id="btnViewJS" onclick="doStuff2()" class="waves-effect waves-light btn-small blue"><i class="material-icons left">assignment</i>View New Job Sheet</button>
<script>document.getElementById("btnViewJS").hidden=true; </script>

【问题讨论】：

标签： javascript materialize

【解决方案1】：

document.getElementById("btnViewJS").style.display='none'

【讨论】：

【解决方案2】：

您可以将按钮的display css 样式设置为none，如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
<button id="btnViewJS" onclick="doStuff2(this)" class="waves-effect waves-light btn-small blue"><i class="material-icons left">assignment</i>View New Job Sheet</button>
<script>
  function doStuff2(elem) {
    elem.style.display = 'none';
  }
</script>

【讨论】：

【解决方案3】：

试试这个

document.getElementById("btnViewJS").style.visibility = "hidden";

这也行

document.getElementById("btnViewJS").style.display = "none";

第一个将隐藏元素，但保持 adiacent 元素固定，第二个将呈现页面，因为按钮不存在。

【讨论】：