html的input标签class属性的值，HTML和css网易云音乐

啊这，爷终于等到你了！今天，爷要给你们讲讲html里的一个重要属性——class。爷看你们都学过html了，但是class这个属性老是不怎么被提到，实际上他可重要了，兄弟们得注意啊！

先来简单介绍一下class吧，这个属性可以给你的html元素打上一个名字，好让你方便地对这些元素进行操作，优化你的代码。比如说，你有一堆div元素，但你想同时对其中的几个添加相同的样式，那么你就可以先把这几个div元素加上同一个class，再通过css来定义这个class的样式。这样就不用一个个修改css了，省了不少功夫不是？

我们一起来看一下，用class属性给元素命名的方法吧：

```html

```

对于上面这几个div来说，爷给他们各自加了一个class，分别是“maifang”和“huatong”。布局里面，他们还是各自独立的，但是在css里，我们可以根据他们这个class来统一定义样式，比如说：

```css

.maifang {

color:red;

}

.huatong {

color:blue;

}

```

为了方便，爷就分别给他们定了颜色样式。这时候，div们也就根据自己的class分别继承了不同的样式，有点像少年时候穿的校服，各个学校的颜色都不一样喵！

另外，爷再给你们讲讲，class不仅可以用于css样式上，还可以用于js操作元素。比如说，如果你想对网页里所有class为“maifang”的元素做一个点击事件，那么你就可以这样写代码来实现：

```js

var maifangs = document.getElementsByClassName('maifang');

for (var i = 0; i < maifangs.length; i++) {

maifangs[i].addEventListener('click',function(){

console.log('这是一堆卖房信息');

});

}

```

这段js代码我们就是通过getElementsByClassName方法来获取到名为“maifang”的元素，然后通过for循环和addEventListener方法来给他们同时添加了一个点击事件。这个事件可以是你想要的任何操作，比如弹出一个小窗口，显示更多的信息，等等。

当然，有时候我们也会用“id”属性来标识一个元素，这个也是可以的，不过，id属性有一个致命的问题，就是不能重复。class就没有这个问题，一个元素可以拥有多个class，这样也方便我们对元素进行复杂的事件操作，这点，你们一定要记住啊！

好了好了，爷今天就给你们讲到这里，你们可要记牢啊，class是个非常实用的属性，可以给你的代码带来很大的便利，同时，也要注意，class要适度，不要滥用，不要重复，不要过多，不然，就是一个大bug啊！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/