JavaScript Academy · 课时

修改属性和类

Q: 「修改属性和类」这节课中我会学到什么？

使用 setAttribute 和 classList API。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 setAttribute 和 classList API。

修改属性和类 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

属性和类

元素包含属性（例如 href 或 data-id）和 CSS 类。JavaScript 提供了用于精确读取和修改二者的 API。

getAttribute

getAttribute 会以字符串形式读取属性值；如果属性不存在，则返回 null。

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute 会创建或更新属性。属性值始终是字符串。

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute 和 hasAttribute

使用 removeAttribute 删除属性，使用 hasAttribute 检查属性是否存在。

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

属性与元素属性

许多属性也作为元素属性存在（例如 element.id 或 input.value）。元素属性反映当前状态，而属性通常保存初始 HTML 值。

input.value;                 // current value
input.getAttribute("value"); // original default

自定义数据属性的数据集

自定义 data-* 属性可以通过 dataset 对象访问，并使用 camelCase 形式的键名。

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

classList 概览

classList 是一个实时对象，可用于管理类，而不必手动编辑 className 字符串。

const box = document.querySelector(".box");
console.log(box.classList);

classList.add 和 remove

add 和 remove 可以接受一个或多个类名，并会妥善忽略重复的类名或不存在的类。

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle 会在类不存在时添加它，在类存在时删除它，并返回表示新状态的布尔值。第二个参数可以强制开启或关闭。

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains 和 replace

contains 会检查类是否存在，replace 会在原位置将一个类替换为另一个类。

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

为什么 classList 优于 className

将 className 作为字符串编辑可能会覆盖其他类。classList 只会安全地修改指定的类。

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

快速检查

请选择切换行为。

回顾

使用 getAttribute/setAttribute/removeAttribute/hasAttribute 读写属性，并通过 dataset 访问 data-*。使用 classList 的方法 add、remove、toggle、contains 和 replace 管理类；这些方法比覆盖 className 更安全。

常见问题解答

「修改属性和类」课时是免费的吗？

是的 — 「修改属性和类」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「修改属性和类」这节课中我会学到什么？

使用 setAttribute 和 classList API。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「修改属性和类」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy