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

Question

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

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

问题是：

一个简单的jQuery：

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

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

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

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

这似乎有点丑陋并且违反了一些良好的标准规则，这是隐藏按钮而不产生闪烁效果的唯一方法吗？

score 14 · Accepted Answer

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

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

score 10 · Accepted Answer

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

如果页面上的脚本类型不受支持或当前在浏览器中关闭脚本，则 HTML NoScript Element () 定义要插入的一段 html。

score 3 · Accepted Answer

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

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

或者更好：

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

请注意，我使用button#MyButton的是具有更高的特异性值，以便它将覆盖第一种方法。

score 2 · Accepted Answer

使用无 js 类：

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

定义该类以隐藏元素：

.no-js { display: none; }

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

4 回答 4