📌  相关文章
📜  HTML class属性

📅  最后修改于: 2020-11-01 11:31:44             🧑  作者: Mango

HTML class属性

HTML中的类属性

HTML类属性用于为HTML元素指定单个或多个类名称。 CSS和JavaScript可以使用该类名来为HTML元素执行某些任务。您可以在CSS中将此类与特定的类一起使用，编写一个句点(。)字符，后跟用于选择元素的类的名称。

可以在以下类别中定义类属性

我们已经为类名“ headings”定义了样式，并且可以在要提供此类样式的任何HTML元素中使用该类名。我们只需要遵循以下语法即可使用它。

 content

范例1：




    



This is first heading


This is Second heading


This is third heading


This is fourth heading

另一个具有不同类名的示例

例：

让我们使用带有CSS的类名“ Fruit”来设置所有元素的样式。

  
  

Mango
  

Mango is king of all fruits.
  
  

Orange
  

Oranges are full of Vitamin C.
  
  

Apple
  

An apple a day, keeps the Doctor away.

在这里您可以看到我们已经在(。)中使用了类名“ fruit”来使用其所有元素。

注意：您可以在任何HTML元素上使用class属性。类名区分大小写。

JavaScript中的类属性

您可以使用getElementsByClassName()方法将JavaScript访问元素与指定的类名一起使用。

例：

当用户单击按钮时，让我们隐藏类名称为“ fruit”的所有元素。

  
  
  
  

Class Attribute with JavaScript
  

Click the button, to hide all elements with the class name "fruit", with JavaScript:
  
  
  
  
  

Mango
  

Mango is king of all fruits.
  
  

Orange
  

Oranges are full of Vitamin C.
  
  

Apple
  

An apple a day, keeps the Doctor away.

注意：您将在我们的JavaScript教程中了解有关JavaScript的更多信息。

多班

您可以对HTML元素使用多个类名(多个)。这些类名必须用空格分隔。

例：

让我们使用类名“ fruit”和类名“ center”来设置元素的样式。

  
  
  
  
  

Multiple Classes
  

All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.
  
  

Mango
  

Orange
  

Apple

您可以看到第一个元素

属于“水果”类和“中心”类。

带有不同标签的同类

您可以将相同的类名与不同的标签一起使用，例如

和

等分享相同的风格。

例：

  
  
  
  

Same Class with Different Tag
  

Mango
  

Mango is the king of all fruits.