您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

HTML/jQuery 隱藏元素：.hide() / .show() / .toggle() 與 CSS display/visibility 對比

編輯：程式設計綜合問答

需求：HTML 頁面完成功能後隱藏某段標簽 (如 <div>)，不在頁面顯示。

jQuery 方法 (最簡單)

<div id="myDiv">完成功能後隱藏我</div>
<button onclick="hideDiv()">隱藏</button>
<button onclick="showDiv()">顯示</button>

<script>
function hideDiv() {
    $('#myDiv').hide(); // 設置 style="display: none"
}
function showDiv() {
    $('#myDiv').show(); // 恢復原 display 值
}
// 或切換
$('#myDiv').toggle();
</script>

原生 JavaScript (無依賴)

// 方式一：display:none (佈局中移除，不佔空間)
document.getElementById('myDiv').style.display = 'none';
document.getElementById('myDiv').style.display = 'block'; // 或 flex/grid/inline-block

// 方式二：visibility:hidden (佔空間，只隱藏內容)
document.getElementById('myDiv').style.visibility = 'hidden';
document.getElementById('myDiv').style.visibility = 'visible';

// 方式三：opacity:0 + pointer-events:none (可過渡動畫)
document.getElementById('myDiv').style.opacity = '0';
document.getElementById('myDiv').style.pointerEvents = 'none';
// 顯示
document.getElementById('myDiv').style.opacity = '1';
document.getElementById('myDiv').style.pointerEvents = 'auto';

// 方式四：hidden 屬性 (HTML5 標準語義)
document.getElementById('myDiv').hidden = true;
document.getElementById('myDiv').hidden = false;

CSS 類切換 (推薦：關注點分離)

<style>
.hidden { display: none !important; }
.visible { display: block; }
.fade-out { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.fade-in { opacity: 1; transition: opacity 0.3s; pointer-events: auto; }
</style>

<div id="myDiv" class="visible">內容</div>

<script>
const el = document.getElementById('myDiv');
el.classList.add('hidden');      // 隱藏
el.classList.remove('hidden');   // 顯示
el.classList.toggle('hidden');   // 切換

// 帶動畫
el.classList.replace('fade-in', 'fade-out'); // 淡出
el.classList.replace('fade-out', 'fade-in'); // 淡入
</script>

對比總結

方法	佔佈局空間	可動畫	語義	適用場景
`display:none`	否	否 (需配合 keyframes)	移除	完全隱藏、條件渲染
`visibility:hidden`	是	否	隱形	保持佈局結構、暫時隱藏
`opacity:0`	是	是 (transition)	透明	淡入淡出、疊加層控制
`hidden` 屬性	否	否	隱藏	語義化、無 JS 環境、SEO 友好
`jQuery .hide()`	否	內置動畫 `.hide(300)`	移除	簡單項目、已引用 jQuery

進階：條件渲染框架寫法


<div v-if="showDiv">內容</div>          
<div v-show="showDiv">內容</div>         


{showDiv && <div>內容</div>}             {/* 條件渲染 */}
<div style={{display: showDiv ? 'block' : 'none'}}>內容</div> {/* CSS 控制 */}


<div *ngIf="showDiv">內容</div>
<div [hidden]="!showDiv">內容</div>

選擇原則：完全移除用 display:none/hidden/v-if，保持佈局用 visibility/opacity，需動畫用 opacity+transition，框架項目用框架指令。