srcmini本文概述
HTML中的类属性
HTML类属性用于为HTML元素指定单个或多个类名称。 CSS和JavaScript可以使用该类名称来为HTML元素执行某些任务。你可以在CSS中将此类与特定类一起使用, 编写一个句点（。）字符, 后跟用于选择元素的类的名称。
可以在<style>标记内或使用（。）字符在单独的文件中定义类属性。
在HTML文档中, 我们可以将相同的类属性名称与不同的元素一起使用。
定义一个HTML类
要创建HTML类, 首先使用<head>部分中的<style>标签为HTML类定义样式, 如下例：
例：
<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>立即测试
另一个具有不同类名的示例
例：
让我们使用带有CSS的类名“ Fruit”来设置所有元素的样式。
<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元素上使用class属性。类名区分大小写。
JavaScript中的类属性
你可以使用getElementsByClassName()方法将JavaScript访问元素与指定的类名一起使用。
例：
当用户单击按钮时, 让我们隐藏类名称为“ fruit”的所有元素。
<!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>立即测试
注意：你将在我们的JavaScript教程中了解有关JavaScript的更多信息。
多班
你可以对HTML元素使用多个类名（多个）。这些类名必须用空格分隔。
例：
让我们使用类名“ fruit”和类名“ center”来设置元素的样式。
<!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>立即测试
你可以看到第一个元素<h2>属于“水果”类和“中间”类。
带有不同标签的同类
你可以将相同的类名与不同的标签（例如<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>立即测试
评论前必须登录！
注册