HTML Class

HTML class 是一种可以添加到 HTML 元素的属性，用于为其指定一个特定的类名。例如，

<h2 class="logo">Programiz</h2>

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

浏览器输出

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> 元素有两个类名：animal 和 dog。我们可以为一个 HTML 元素添加多个类，并用空格分隔它们。

HTML 元素上的相同类名

我们还可以在多个 HTML 元素上提供相同的类名。这使得为多个元素应用相同的样式变得更容易。让我们看一个例子，

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

浏览器输出

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

HTML 中的类与 JavaScript

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

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

浏览器输出

在上面的例子中，我们使用 document.getElementsByClassName("fruits") 来访问 HTML 元素，其中 fruit 是 <h2> 元素中类的名称。然后，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 元素中使用多个类。