跳到主要内容

HTML 类

提示
  1. 类名属性：HTML class 属性用于给元素指定一个或多个类名，通过 CSS 和 JavaScript 实现样式和功能控制。
  2. 多重类和共享类：一个 HTML 元素可以有多个用空格分隔的类名；多个元素可以共享相同的类名，实现统一样式。
  3. 类名与 JavaScript 互动：通过 JavaScript 可以利用类名访问和修改具有相同类名的元素，使用 getElementsByClassName 方法。

HTML 的 class 是可以添加到 HTML 元素上的一个属性，用于赋予它一个特定的类名。例如，

<h2 class="logo">马上学123</h2>

<style>
  .logo {
    color: blue;
  }
</style>

浏览器输出

带有 logo 类的 h2 属性，用 logo 选择器设置样式

class 属性允许 CSS 和 JavaScript 访问 HTML 代码。在上面的例子中，带有类名 logo 的 <h2> 元素，通过 .logo 选择器设置了样式。

注意：在 CSS 中，类名前面要加上 .。

HTML 中的多重类​

一个元素可以有多个类。例如，

<h2 class="animal dog">Lily</h2>

<style>
  .animal {
    color: red;
  }
  .dog {
    border: 1px solid black;
  }
</style>

浏览器输出

带有两个类的 h2

在上面的例子中，<h2> 元素有两个类名 animal 和 dog。我们可以向 HTML 元素添加多个类，并用空格分隔。

HTML 元素上的相同类名​

我们还可以在多个 HTML 元素上使用相同的类名。这样可以更轻松地将相同的样式应用于多个元素。让我们看一个例子，

<h2 class="animal">Dog</h2>
<h2 class="animal">Monkey</h2>
<style>
  .animal {
    color: blue;
  }
</style>

浏览器输出

使用 CSS 为具有相同类的多个元素设置样式。

这里，我们在两个 <h2> 元素上使用了相同的类名 animal。

HTML 中的 JavaScript 类​

class 属性允许 JavaScript 通过类选择器或 getElementsByClassName API 访问元素。例如，

<h2 class="fruit">APPLE</h2>
<script>
  let element = document.getElementsByClassName("fruit")[0];
  element.innerHTML = "ORANGE";
</script>

浏览器输出

使用 JavaScript 修改带有类的元素。

在上面的例子中，我们使用 document.getElementsByClassName("fruit") 访问了 <h2> 元素中类名为 fruit 的 HTML 元素。然后，innerHTML 属性将内容（<h2> 标签内的文本）从 APPLE 更改为 ORANGE。

注意事项​

  • 类名是区分大小写的。因此，animal 和 Animal 是两个不同的类名。
  • 类名中不能使用空格。如果在类名中使用空格，它将被视为两个不同的类名。例如，如果你有以下 CSS：
.my class { font-size: 14px; color: blue; }

这不会应用于具有 my class 类的元素的样式。相反，它会应用于具有 my 和 class 类的元素的样式（由于它们之间的空格，被视为两个不同的类名）。

为了避免这个问题，你应该在类名中使用不同的字符（如连字符或下划线）替换空格。例如，将 my class 更改为 my-class。

Id 与 Class 的区别​

HTML 的 id 和 class 都是可以添加到 HTML 元素上的属性，用于为其赋予一个标识符。id 和 class 的主要区别在于，id 在 HTML 文档中是唯一的，而类可以在页面上多次使用。

此外，我们只能在一个 HTML 元素中使用一个 id，而我们可以在一个 HTML 元素中使用多个类。

最后于 更新