HTML 类
- 类名属性:HTML
class
属性用于给元素指定一个或多个类名,通过 CSS 和 JavaScript 实现样式和功能控制。 - 多重类和共享类:一个 HTML 元 素可以有多个用空格分隔的类名;多个元素可以共享相同的类名,实现统一样式。
- 类名与 JavaScript 互动:通过 JavaScript 可以利用类名访问和修改具有相同类名的元素,使用
getElementsByClassName
方法。
HTML 的 class
是可以添加到 HTML 元素上的一个属性,用于赋予它一个特定的类名。例如,
<h2 class="logo">马上学123</h2>
<style>
.logo {
color: blue;
}
</style>
浏览器输出
class
属性允许 CSS 和 JavaScript 访问 HTML 代码。在上面的例子中,带有类名 logo
的 <h2>
元素,通过 .logo
选择器设置了样式。
注意:在 CSS 中,类名前面要加上 .
。
HTML 中的多重类
一个元素可以有多个类。例如,
<h2 class="animal dog">Lily</h2>
<style>
.animal {
color: red;
}
.dog {
border: 1px solid black;
}
</style>
浏览器输出
在上面的例子中,<h2>
元素有两个类名 animal
和 dog
。我们可以向 HTML 元素添加多个类,并用空格分隔。
HTML 元素上的相同类名
我们还可以在多个 HTML 元素上使用相同的类名。这样可以更轻松地将相同的样式应用于多个元素。让我们看一个例子,
<h2 class="animal">Dog</h2>
<h2 class="animal">Monkey</h2>
<style>
.animal {
color: blue;
}
</style>
浏览器输出
这里,我们在两个 <h2>
元素上使用了相同的类名 animal
。
HTML 中的 JavaScript 类
class
属性允许 JavaScript 通过类选择器或 getElementsByClassName
API 访问元素。例如,
<h2 class="fruit">APPLE</h2>
<script>
let element = document.getElementsByClassName("fruit")[0];
element.innerHTML = "ORANGE";
</script>
浏览器输出
在上面的例子中,我们使用 document.getElementsByClassName("fruit")
访问了 <h2>
元素中类名为 fruit
的 HTML 元素。然后,innerHTML
属性将内容(<h2>
标签内的文本)从 APPLE
更改为 ORANGE
。
注意事项
- 类名是区分大小写的。因此,
animal
和Animal
是两个不同的类名。 - 类名中不能使用空格。如果在类名中使用空格,它将被视为两个不同的类名。例如,如果你有以下 CSS:
.my class { font-size: 14px; color: blue; }
这不会应用于具有 my class
类的元素的样式。相反,它会应用 于具有 my
和 class
类的元素的样式(由于它们之间的空格,被视为两个不同的类名)。
为了避免这个问题,你应该在类名中使用不同的字符(如连字符或下划线)替换空格。例如,将 my class
更改为 my-class
。
Id 与 Class 的区别
HTML 的 id
和 class
都是可以添加到 HTML 元素上的属性,用于为其赋予一个标识符。id
和 class
的主要区别在于,id
在 HTML 文档中是唯一的,而类可以在页面上多次使用。
此外,我们只能在一个 HTML 元素中使用一个 id
,而我们可以在一个 HTML 元素中使用多个类。