当前位置：首页 > article >正文

Web开发基础学习——HTML中id 和 class 标识和选择元素的属性的理解

article 2024/12/3 2:48:37

Web开发基础学习系列文章目录

第一章基础知识学习之HTML中id 和 class 标识和选择元素的属性的理解

文章目录

Web开发基础学习系列文章目录
前言
一、id属性
二、class 属性
三、区别
总结

前言

上篇文章介绍了<div id=“header”>这是一个头部</div>元素，这个元素是展示在html页面中的。那么这个元素以什么样的样式展示呢？同样怎么操作这个元素呢？我们知道样式展示是在CSS文件中，而元素操作是在JavaScript文件中。那么我们就需要一个标识。这就是id或者class属性。

在 HTML 中，id 和 class 是用于标识和选择元素的属性。它们在 CSS 和 JavaScript 中非常有用，用于应用样式和操作 DOM 元素。

一、id属性

基础知识

定义：id 属性用于为 HTML 元素指定一个唯一的标识符。
唯一性：在同一个 HTML 文档中，每个 id 必须是唯一的。
用途：
在 CSS 中，通过 id 选择器应用样式。
在 JavaScript 中，通过 id 选择器获取和操作元素。

示例

html文件：

<div id="header">这是一个头部</div>

CSS文件：

#header {
  background-color: lightblue;
}

Javascript 文件：

const header = document.getElementById('header');
header.innerText = '新的头部内容';

解释
在这个示例中：

html中显示的是一段文字“这是一个头部”，
至于这句话是怎么显示的呢？找到CSS文件中，header属性，看到里面有background-color: lightblue;的要求，那就按这种样式展示出来。
那么怎么操作这句话呢？找到Javascript 文件中的，header属性一栏，看到可以给这个header重新赋值。
总的来说，就是通过这个id属性，来找到对应的CSS样式，和JavaScript操作。

二、class 属性

基本概念

定义：class 属性用于为 HTML 元素指定一个或多个类名。
复用性：多个元素可以共享同一个类名。
用途：
在 CSS 中，通过 class 选择器应用样式。
在 JavaScript 中，通过 class 选择器获取和操作元素。
示例

示例

html文件：

<div class="container">这是一个容器</div>
<div class="container">这是另一个容器</div>

CSS文件

.container {
  border: 1px solid black;
  padding: 10px;
}

JavaScript文件

const containers = document.getElementsByClassName('container');
for (let container of containers) {
  container.style.backgroundColor = 'lightgray';
}