javascript系列之className属性

className是一个Element接口中的属性，它可以获取和设置一个HTML元素的class属性值。它会返回一个字符串，代表了HTML元素的class属性，如果一个HTML元素有多个class，它也会一并返回。</</</</</</</tmp🍺 🎶倘若一个元素是SVGElement，className同样可以是SVGAnimatedString的一个实例。

鱼馅饼

1065人浏览 · 2023-09-07 18:50:20

鱼馅饼 · 2023-09-07 18:50:20 发布

一.欢迎来到我的酒馆

在本章节介绍DOM className属性。

二.什么是className

className是一个Element接口中的属性，它可以获取和设置一个HTML元素的class属性值。它会返回一个字符串，代表了HTML元素的class属性，如果一个HTML元素有多个class，它也会一并返回。
例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Learning className property</h1>
    <p id="item" class="tmp🍺 🎶">This is a paragraph.</p>
    <script src="./main.js"></script>
  </body>
</html>

javascript代码：

const el = document.getElementById("item");
// el.className = el.className === "active" ? "inactive" : "active";
// console.log(el);
console.log(el.className);

输出：

tmp🍺 🎶

倘若一个元素是SVGElement，className同样可以是SVGAnimatedString的一个实例。如果你在处理SVG元素的话，使用函数Element.getAttribute()和Element.setAttribute()来设置和获取className会更便捷。然而，当一个元素的class属性没有写出来，Element.getAttribute()会返回null，className会返回"";
修改一下上面的例子，把p标签的class属性丢开：

    <p id="item">This is a paragraph.</p>

javascript代码：

const el = document.getElementById("item");
// el.className = el.className === "active" ? "inactive" : "active";

// console.log(el);

console.log(el.className);
console.log(el.getAttribute("class"));

输出：


null

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..