HTML 类属性
HTML class 属性用于指定HTML元素的类。
多个 HTML 元素可以共享同一个类。
使用 class 属性
class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。
在下面的示例中，我们有三个 <div> 元素，它们的 class 属性值为
"city"。所有三个 <div> 元素的样式都将根据 head 部分定义的 .city 样式定义进行设置：
实例
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
</div>
<div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
</div>
<div class="city">
<h2>东京</h2>
<p>东京是日本的首都。</p>
</div>
</body>
</html>
亲自试一试 »
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
</div>
<div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
</div>
<div class="city">
<h2>东京</h2>
<p>东京是日本的首都。</p>
</div>
</body>
</html>
在下面的示例中，我们有两个 <span> 元素，它们的 class 属性的值为
"note"。两个 <span> 素的样式将根据 head 部分定义的 .note 进行设置：
实例
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>我的 <span class="note">重要</span> 标题</h1>
<p>这是一些 <span class="note">重要的</span> 文本。</p>
</body>
</html>
亲自试一试 »
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>我的 <span class="note">重要</span> 标题</h1>
<p>这是一些 <span class="note">重要的</span> 文本。</p>
</body>
</html>
提示: class 属性可以用于任何HTML元素。
注释: 类名区分大小写！
Class 的语法
创建一个类；写一个句点(.) 字符，后跟一个类名。然后，在大括号 {} 中定义CSS属性：
实例
创建一个名为 "city" 的类:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p>
<h2 class="city">东京</h2>
<p>东京是日本的首都。</p>
</body>
</html>
亲自试一试 »
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p>
<h2 class="city">东京</h2>
<p>东京是日本的首都。</p>
</body>
</html>
多类
HTML 元素可以属于多个类。
要定义多个类，请用空格分隔类名，例如 <div class="city main">。元素将根据指定的所有类设置样式。
在下面的示例中，第一个 <h2> 元素同时属于
city 类和 main 类，并将从这两个类中获取 CSS 样式：
不同的元素可以共享同一类
不同的HTML元素可以指向相同的类名。
在下面的示例中， <h2> 和 <p>
都指向 city 类并将共享相同的样式：
JavaScript 中 class 属性的使用
JavaScript 还可以使用类名为特定元素执行某些任务。
JavaScript 可以使 getElementsByClassName() 方法访问具有特定类名的元素：
实例
单击按钮隐藏所有类名为 "city" 的元素:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
亲自试一试 »
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
如果您不理解上面示例中的代码，请不要担心。
您将在 HTML JavaScript 章节中了解更多关于 JavaScript 的内容。
本章小结
- HTML
class属性为元素指定一个或多个类名 - 类可被 CSS 和 JavaScript 用来选择和访问特定的元素
class属性可以用于任何HTML元素- 类名区分大小写
- 不同的HTML元素可以指向相同的类名
- JavaScript 可以使用
getElementsByClassName()方法访问具有特定类名的元素。
