码农教程 - 一技在手,衣食无忧! tools

HTML 类属性

❮ 上一节 下一节 ❯

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

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

使用类属性

这个class属性通常用于指向样式表中的类名。 JavaScript 还可以使用它来访问和操作具有特定类名的元素。

在下面的例子中我们有三个<div>元素与class值为 "city" 的属性。三者皆有<div>元素的样式将根据.cityhead 部分的样式定义：

示例

<!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>
亲自试一试 »

在下面的例子中我们有两个<span>元素与class值为 "note" 的属性。两个都<span>元素的样式将根据.notehead 部分的样式定义：

示例

<!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>
亲自试一试 »

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

笔记：类名区分大小写！

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

类的语法

创建一个类；写一个句点 (.) 字符，后跟类名。然后，在大括号 {} 内定义 CSS 属性：

示例

创建一个名为"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">。该元素将根据所有指定的类设置样式。

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

示例

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
亲自试一试 »

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

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

在下面的示例中，两者<h2>和<p>指向 "city" 类并将共享相同的样式：

示例

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
亲自试一试 »

JavaScript 中类属性的使用

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>
亲自试一试 »

如果您不理解上面示例中的代码，请不要担心。

您将在我们的文章中了解有关 JavaScript 的更多信息HTML JavaScript章节，或者您可以学习我们的JavaScript 教程。

章节总结

  • HTMLclass属性指定元素的一个或多个类名
  • CSS 和 JavaScript 使用类来选择和访问特定元素
  • 这个class属性可以用在任何 HTML 元素上
  • 类名区分大小写
  • 不同的 HTML 元素可以指向同一个类名
  • JavaScript 可以通过以下方式访问具有特定类名的元素getElementsByClassName()方法

HTML练习

通过练习测试一下

练习:

创建一个名为"special" 的类选择器。

在 "special" 类中添加值为 "blue" 的颜色属性。

<!DOCTYPE html>
<html>
<head>
<style>

   ;

</style>
</head>
<body>

<p class="special">My paragraph</p>

</body>
</html>

开始练习


❮ 上一节 下一节 ❯