Question

我想用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>

Answer 1

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

Answer 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>

Answer 3

尝试一下

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

这也会起作用

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

第一个将隐藏该元素，但保持固定不变的元素，第二个将在不存在按钮的情况下呈现页面。

隐藏实现CSS按钮

3 个答案: