HTML 类（class）属性
HTML 元素class属性是用于指定元素的类。
多个 HTML 元素可以共享同一个类。
使用类属性
class属性通常用于指向到样式表中的类名。它也可以被JavaScript用来访问和使用特定类名操作元素。
在下面的示例中，我们有三个元素具有值为"btn"的button元素：
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
color: red;
margin-left: 10px;
}
</style>
</head>
<body>
<button class="btn">按钮1<button>
<button class="btn">按钮2<button>
<button class="btn">按钮3<button>
<button>按钮4</button>
</body>
</html>
CSS中类的写法
在CSS中，类的声明使用英文的点（.）开始，点后面紧跟类名，点和类名之间没有空格。然后，在大括号 {} 中定义 CSS 属性：
index.html
<html>
<head>
<style>
.nav {
color: black;
font-size: 20px;
}
</style>
</head>
<body>
...
</body>
</html>
在单独的CSS文件中：
style.css
.nav {
color: black;
font-size: 20px;
}
多个类
HTML 元素可以拥有多个类。 不同的 HTML 元素也可以指向相同的类名。 要定义多个类，请用空格分隔类名，例如：
<html>
<head>
<style>
.btn {
color: black;
margin-left: 10px;
padding: 5px 20px;
border: 1px solid #dddddd;
background-color: #ffffff;
font-size: 16px;
cursor: pointer;
}
.primary {
color: green;
}
.info {
color: blue;
}
</style>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn primary">按钮2</button>
<button class="btn info">按钮3</button>
<span class="btn primary">span 按钮</span>
</body>
</html>
在javascript使用
JavaScript 可以使用类名来执行某些任务。
JavaScript 可以使用getElementsByClassName()或querySelector()或querySelectorAll()方法访问具有特定类名的元素：
<html>
<head>
<style>
.btn {
color: black;
margin-left: 10px;
padding: 5px 20px;
border: 1px solid #dddddd;
background-color: #ffffff;
font-size: 16px;
cursor: pointer;
}
.primary {
color: green;
}
.info {
color: blue;
}
</style>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn primary">按钮2</button>
<button class="btn info">点击我吧</button>
<span class="btn primary">span 按钮</span>
<script>
// 查找类名为 info 的元素，返回一个类型为HTML元素的数组
let infoButton = document.getElementsByClassName('info')[0]; //返回HTML元素数组
// 或
let infoButton = document.querySelector('.info'); // 返回单个HTML 元素
//或
let infoButton = document.querySelectorAll('.info')[0]; // 返回HTML元素数组
//以上方法只需使用其中一个
// 给这个元素添加一个点击事件
infoButton.addEventListener('click', function ({ currentTarget }){
alert(currentTarget.innerHTML)
},false);
</script>
</body>
</html>
HTML 参考
| 名称 | 描述 |
|---|