二维码
搜索 ×

HTML 类属性

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 类属性

HTML 属性是 用于指定 HTML 元素的类。class

多个 HTML 元素可以共享同一个类。

使用 class 属性

该属性通常用于指向 添加到样式表中的类名。JavaScript 也可以使用它来访问和 使用特定类名操作元素。class

在下面的示例中，我们有三个元素 属性的值为 “城市”。所有三个元素都将根据 head 部分中的样式定义进行相同的样式设置：<div>``class``<div>``.city

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>London</h2>  
  <p>London is the capital of England.</p>  

</div>

<div class="city">  
  <h2>Paris</h2>  
  <p>Paris is the capital of France.</p>  

</div>

<div class="city">  
  <h2>Tokyo</h2>  
  <p>Tokyo is the capital of Japan.</p>  

</div>

</body>  
</html>

在下面的示例中，我们有两个元素 属性的值为 “注意”。这两个元素将根据 head 部分中的样式定义进行相同的样式设置：<span>``class``<span>``.note

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>  
<head>  
<style>  
.note {  font-size: 120%;  
  color: red;}  
</style>  
</head>  
<body>

<h1>My <span class="note">Important</span> Heading</h1>  
<p>This is some <span class="note">important</span> text.</p>

</body>  
</html>

提示： 该属性可用于任何 HTML 元素。class

注意： 类名区分大小写！

提示： 您可以在我们的 [CSS 教程中了解有关 CSS]的更多信息。

类的语法

创建类;写一个句点 （.） 字符，后跟一个 类名。 然后，在大括号 {} 中定义 CSS 属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
创建一个名为“city”的类：

<!DOCTYPE html>
<html>  
<head>  
<style>  
.city {  background-color: tomato;  
  color: white;  
  padding: 10px;}  
</style>  
</head>  
<body>

<h2 class="city">London</h2>  

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>  

<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>  

<p>Tokyo is the capital of Japan.</p>

</body>  
</html>

多个类

HTML 元素可以属于多个类。

要定义多个类，请用空格分隔类名，例如 <div class=“city main”>。该元素将根据所有 指定的类。

在下面的示例中，第一个元素既属于该类，也属于该类， 并将从这两个类中获取 CSS 样式：<h2> city``main

1
2
3
<h2 class="city main">London</h2>  
<h2 class="city">Paris</h2>  
<h2 class="city">Tokyo</h2>

不同的元素可以共享同一个类

不同的 HTML 元素可以指向相同的类名。

在以下示例中，和都指向“city”类 并将共享相同的样式：<h2>``<p>

1
2
<h2 class="city">Paris</h2>  
<p class="city">Paris is the capital of France</p>

JavaScript 中使用 class 属性

JavaScript 也可以使用类名来执行某些任务 特定元素。

JavaScript 可以使用以下方法访问具有特定类名的元素：getElementsByClassName()

1
2
3
4
5
6
7
8
9
10
单击按钮可隐藏所有带有类名的元素 “城市”：

<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 的更多信息，或者您可以学习我们的 [JavaScript 教程]。

本章小结

  • HTML 属性指定一个或 元素的更多类名class
  • CSS 和 JavaScript 使用类来选择和访问特定的 元素
  • 该属性可用于任何 HTML 元素class
  • 类名区分大小写
  • 不同的 HTML 元素可以指向相同的类名
  • JavaScript 可以使用该方法访问具有特定类名的元素getElementsByClassName()

推荐教程