# jQuery attr()如何顯示隱藏元素
## 前言
在網頁開發中，元素的顯示與隱藏是最基礎且高頻的需求之一。jQuery作為曾經最流行的JavaScript庫，提供了多種方法來實現這一功能。其中`attr()`方法雖然并非專為顯示隱藏設計，但通過操作HTML屬性（如`style`或自定義屬性）也能間接實現效果。本文將深入探討如何利用`attr()`控制元素顯隱，并對比其他更專業的jQuery方法。
---
## 一、attr()方法基礎
### 1. 方法定義
`attr()`是jQuery中用于獲取或設置HTML元素屬性的核心方法：
```javascript
// 獲取屬性值
$(selector).attr(attributeName);
// 設置屬性值
$(selector).attr(attributeName, value);
id, class, href）data-*）style屬性）// 隱藏元素
$("#target").attr("style", "display: none");
// 顯示元素
$("#target").attr("style", "display: block");
注意事項：
- 會覆蓋元素原有的全部行內樣式
- 需要明確知道元素默認的display值（block/inline/inline-block等）
配合CSS定義：
.hidden { display: none; }
.visible { display: block; }
jQuery操作：
// 隱藏
$("#target").attr("class", "hidden");
// 顯示
$("#target").attr("class", "visible");
優勢： - 樣式與行為分離 - 便于維護多狀態樣式
// 初始化標記
$("#target").attr("data-visible", "true");
// 切換狀態
$("#toggleBtn").click(function(){
const isVisible = $("#target").attr("data-visible") === "true";
$("#target")
.attr("data-visible", !isVisible)
.attr("style", `display: ${isVisible ? "none" : "block"}`);
});
// 專業方法
$("#target").hide(); // 等同于 display: none
$("#target").show(); // 恢復為原有display值
優勢： - 自動記憶元素原始display狀態 - 支持動畫效果（可傳入duration參數）
$("#target").css("display", "none"); // 更專業的樣式操作
對比attr()： - 不會意外覆蓋其他樣式屬性 - 專為樣式操作優化
$("#target").addClass("hidden"); // 類比class操作更專業
// 一次性設置多個屬性
$("#target").attr({
"style": "display: none",
"aria-hidden": "true"
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background: #3498db;
}
.hidden { display: none; }
</style>
</head>
<body>
<div id="content" class="box"></div>
<button id="toggleAttr">attr()切換</button>
<button id="toggleShowHide">show()/hide()切換</button>
<script>
// attr()方案
$("#toggleAttr").click(function(){
const $el = $("#content");
if($el.attr("style")?.includes("none")) {
$el.attr("style", "");
} else {
$el.attr("style", "display: none");
}
});
// 專業方法對比
$("#toggleShowHide").click(function(){
$("#content").toggle();
});
</script>
</body>
</html>
雖然attr()能夠實現元素顯隱控制，但在實際開發中應遵循以下原則：
show()/hide()等專用方法css()或class操作attr()仍是首選理解各種方法的適用場景，才能編寫出更高效、更易維護的jQuery代碼。 “`
注：本文實際約1100字，可根據需要調整示例部分的內容長度。建議在實際項目中優先考慮使用toggleClass()或hide()/show()等更語義化的方法。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
