HTML 简明教程 ( HTML5 标准 ) - class 属性

class 属性可以为 HTML 元素定义一个或多个类 class

如果 HTML 元素定义了 class 属性，那么我们可以使用 CSS 来定义类的样式

CSS 可以为具有相同类名的元素定义相同的样式，为具有不同类名的元素定义不同的样式

同时我们也可以使用 JavaScript 更轻松地查找 HTML 元素

class 属性的语法

除了 <base>，<head>，<html>，<meta>，<param>，<script>，<style>和 <title> 元素之外，其它的 HTML 元素都可以定义 class 属性

<h1 class="article_title">H1 标题</h1>
<!-- 为当前的类定义样式 -->
<style>
.article_title{
    color:blue;
}
</style>

注意：类的名称是不区分大小写的

为具有相同类名的 HTML 元素定义样式

如果需要为多个 HTML 元素定义相同的样式，首先可以为这些元素定义相同的类名，然后为该类定义样式，以便每个元素的样式统一

这非常方便

例如

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 15px;
}
</style>

<h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都</p>

<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都</p>

<h2 class="city">东京</h2>
<p>东京是日本的首都</p>

为 HTML 元素定义多个类

我们可以为同一个 HTML 元素定义多个类，每个类名用空格分隔

例如

<style>
.city {
    color: white;
    padding: 15px;
}
.london{
    background-color: tomato;
}
.paris{
    background-color: blue;
}
.tokyo{
    background-color: orange;
}
</style>

<h2 class="city london">伦敦</h2>
<p>伦敦是英格兰的首都</p>

<h2 class="city paris">巴黎</h2>
<p>巴黎是法国的首都</p>

<h2 class="city tokyo">东京</h2>
<p>东京是日本的首都</p>

使用 JavaScript 查找 HTML 元素

下面的示例中，当我们单击按钮时会隐藏每个城市的名称

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

关于更多 JavaScript 的用法，可以访问我们的 JavaScript 基础教程