HTML类属性 HTML类属性|HTML5

本文概述

HTML中的类属性
定义一个HTML类
另一个具有不同类名的示例
JavaScript中的类属性
多班
带有不同标签的同类

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>

【HTML类属性】立即测试