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';
}
- 解释
在这个示例中：
- html中显示的两句话“这是一个容器”，“这是另一个容器”。
- 至于这两句话是怎么显示的呢？找到CSS文件中，container属性，看到里面有的要求，那就按这种样式展示出来。
- 那么怎么操作这句话呢？找到Javascript 文件中的，containers 属性一栏，根据这个操作可以修改这两句话。
总的来说，就是通过这个class属性，来找到对应的CSS样式，和JavaScript操作。
三、区别
这里一定会有一个疑问，为什么id属性可以找到相关的展示和操作，class也可以找到相关的展示样式和操作，他们什么区别？
- id是唯一的。为 HTML 元素指定一个唯一的标识符，在同一个文档中必须是唯一的.
- class 属性为 HTML 元素指定一个或多个类名，多个元素可以共享同一个类名
一个是单个操作，一个是批量操作。这就是最大的区别。
总结
在 React 中：id 和 className 属性用于标识和选择元素，应用样式和操作 DOM 元素。