使用Javascript隐藏HTML页面上的按钮的最佳方法

Question

一个简单的页面，带有按钮：

<button id="MyButton">Hello</button>

问题是：

• 我需要按钮来显示Javascript是否已被禁用
• 如果启用了Javascript，我需要隐藏按钮

一个简单的Jquery：

$('#MyButton').hide();

按钮'闪烁'是不够的，它会加载然后隐藏自己，而且非常明显。

我发现做这项工作的一种方法是使用JS在以下后立即隐藏它：

<button id="MyButton">Hello</button>
<script>
    document.getElementById('MyButton').style.visibility = 'hidden';
</script>

这看起来有点难看并破坏了一些好的标准规则，这是隐藏按钮而没有闪烁效果的唯一方法吗？

Answer 1

听起来像是noscript标签的工作！

<noscript>
    <button id="MyButton">Hello</button>
</noscript>

Answer 2

<noscript>
    <button id="MyButton">Hello</button>
</noscript>

  

如果不支持页面上的脚本类型或者当前在浏览器中关闭了脚本，则HTML NoScript Element（）定义要插入的html部分。

MDN

Answer 3

使用包含<noscript>元素的<style>元素。具有活动JavaScript的浏览器不会解析<noscript>。那就是：

<style>#MyButton { display: none; }</style>
<noscript><style> button#MyButton { display: inline; }</style></noscript>

或者更好：

<noscript><button id="MyButton">Button</button></noscript>

注意我正在使用button#MyButton来获得更高的特异性值，以便它将覆盖第一个方法。

Answer 4

使用no-js类：

<button id="MyButton" class="no-js">Hello</button>

定义该类以隐藏元素：

.no-js { display: none; }

然后，在你准备好的处理程序中，删除no-js类 - 如果没有启用javascript，它将保留在那里。