文
章
目
录
章
目
录
HTML 中的类属性
HTML 类属性用于指定 HTML 元素的一个或多个类名。类名可以被 CSS 和 JavaScript 用来执行一些与 HTML 元素相关的任务。您可以在 CSS 中使用该类，只需写一个句点 (.)，然后跟上类名以选择元素。
类属性可以在 <style> 标签内定义，也可以在单独的文件中使用句点 (.) 字符定义。
在 HTML 文档中，可以在不同元素中使用相同的类属性名称。
定义 HTML 类
要创建一个 HTML 类，首先使用以下示例在 <head> 部分内定义 HTML 类的样式：<style> 标签：
示例：
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
我们为类名 “headings” 定义了样式，然后可以在任何我们想要提供此样式的 HTML 元素中使用这个类名。只需遵循以下语法来使用它。
<tag class="ghf"> content </tag>
示例 1：
<!DOCTYPE html>
<html>
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
<body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>
使用不同类名的另一个示例
示例：让我们使用类名 “Fruit” 来为所有元素设置 CSS 样式。
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
在这里，您可以看到我们使用了类名 “fruit” 与 (.) 来使用它的所有元素。
注意：您可以在任何 HTML 元素上使用类属性。类名是区分大小写的。
JavaScript 中的类属性
您可以使用 JavaScript 使用 getElementsByClassName() 方法来访问具有指定类名的元素。
示例：
<!DOCTYPE html>
<html>
<body>
<h2>Class Attribute with JavaScript</h2>
<p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("fruit");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
当用户单击按钮时，让我们隐藏所有带有类名 “fruit” 的元素。注意：您将在我们的 JavaScript 教程中了解更多关于 JavaScript 的内容。
多个类
您可以在 HTML 元素中使用多个类名（不止一个）。这些类名必须用空格分隔。
示例：
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
.center {
text-align: center;
}
</style>
<body>
<h2>Multiple Classes</h2>
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>
<h2 class="fruit center">Mango</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Apple</h2>
</body>
</html>
让我们为类名 “fruit” 和类名 “center” 的元素设置样式。您可以看到第一个元素 <h2> 同时属于 “fruit” 类和 “center” 类。
相同类名不同标签
您可以在不同标签上使用相同的类名，如 <h2> 和 <p> 等，以共享相同的样式。
示例：
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class with Different Tag</h2>
<h2 class="fruit">Mango</h2>
<p class="fruit">Mango is the king of all fruits.</p>
</body>
</html>
