使用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

使用包含<style>元素的<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; }

然后，在你的ready處理程序中，刪除no-js類 - 如果沒有啟用javascript，它將保留在那里。