HTML Class
HTML Class属性
HTML Class属性用于为HTML指定单个或多个class名元件。CSS和JavaScript可以使用该Class名称来为HTML元素执行某些任务。您可以在CSS中将此Class与特定Class一起使用，编写一个句点（.）字符，后跟用于选择元素的class的名称。
可以在<style>标记或在HTML文档中，我们可以将相同的class属性名称与不同的元素一起使用。
HTML定义 Class
要创建HTMLclass，请首先使用<head>部分中的<style>标签为HTMLclass定义样式，如下例:
示例:
<head>
<style>
.headings {
color: lightgreen;
font-family: cursive;
background-color: black;}
</style>
</head>
我们已经为class名"headings"定义了样式，并且我们可以在要提供此class样式的任何HTML元素中使用该class名。我们只需要遵循以下语法即可使用它。
<tag class="ghf">
content </tag>
示例:
<!DOCTYPE html>
<html>
<head>
<style>
.headings {
color: lightgreen;
font-family: cursive;
background-color: black;
}
</style>
</head>
<body>
<h1 class="headings">
这是第一个标题。</h1>
<h2 class="headings">
这是第二个标题。</h2>
<h3 class="headings">
这是第三个标题。</h3>
<h4 class="headings">
这是第四个标题。</h4>
</body>
</html>
输出:
这是第一个标题。
这是第二个标题。
这是第三个标题。
这是第四个标题。
另一个具有不同class名的示例
示例:
让我们使用带有CSS的class名"fruit"来设置样式所有元素。
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<h2 class="fruit">芒果</h2>
<p>
芒果是所有水果之王。</p>
<h2 class="fruit">橙子</h2>
<p>
橙子富含维生素</p>
<h2 class="fruit">苹果</h2>
<p>
一天一个苹果将会远离医生。</p>
输出:
芒果
芒果是所有水果之王。
橙子
橙子富含维生素
苹果
一天一个苹果将会远离医生。
在这里，您可以看到我们在<h2>中使用了class名"fruit"来使用其所有元素。
注意:您可以在任何HTML元素上使用class属性。class名区分大小写。
JavaScript中的class属性
您可以通过使用getElementsByClassName（）方法来使用具有指定class名的JavaScript访问元素。
示例:
当用户单击按钮时，让我们隐藏所有class名称为"fruit"的元素。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class属性</h2>
<p>
单击按钮，使用JavaScript隐藏所有类名称为“ fruit”的元素：</p>
<button onclick="myFunction()">
隐藏元素</button>
<h2 class="fruit">
芒果</h2>
<p>
芒果是所有水果之王。</p>
<h2 class="fruit">
橙子</h2>
<p>
橙子富含维生素</p>
<h2 class="fruit">
苹果</h2>
<p>
一天一个将会远离医生。</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>
输出:
JavaScript Class属性
单击按钮，使用JavaScript隐藏所有类名称为“ fruit”的元素：
芒果
芒果是所有水果之王。
橙子
橙子富含维生素
苹果
一天一个将会远离医生。
注意:您将在我们的JavaScript教程中了解有关JavaScript的更多信息。
多个class
您可以对HTML元素使用多个class名，多个class名称时必须用空格分隔。
示例:
让我们的样式元素的class名称为"fruit"，而class名称为"center"。
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
.center {
text-align: center;
}
</style>
<body>
<h2>
多个class</h2>
<p>
所有这三个元素的类名称均为“水果”。此外，Mango还具有类名“ center”，它使文本居中对齐。</p>
<h2 class="fruit center">
芒果</h2>
<h2 class="fruit">
橙子</h2>
<h2 class="fruit">
苹果</h2>
</body>
</html>
输出:
多个class
所有这三个元素的类名称均为“水果”。此外，Mango还具有类名“ center”，它使文本居中对齐。
芒果
橙子
苹果
您可以看到第一个元素<h2>属于"水果"class和"中间"class。
带有不同标签的相同class
您可以将相同的class名称与不同的标签（如<h2>和<p>等）使用，以共享相同的样式。
示例:
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>
具有不同标签的同一个class</h2>
<h2 class="fruit">
芒果</h2>
<p class="fruit">芒果是所有水果中的王者。</p>
</body>
</html>
输出:
具有不同标签的同一个class
芒果
芒果是所有水果中的王者。
