javascript系列之className属性

最新推荐文章于 2024-03-15 16:56:39 发布

鱼馅饼

最新推荐文章于 2024-03-15 16:56:39 发布

阅读量725

点赞数 1

文章标签： javascript vue.js 前端

一.欢迎来到我的酒馆

在本章节介绍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

鱼馅饼

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript系列之className属性

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

扫一扫