在HTML中为 h1-h6 标签添加序号及颜色背景色块
在HTML结构中，h1 到 h6 是常见的标题标签，通常我们会希望对这些标题进行标注或编号，使其更具层次感。在这篇文章中，我将向您展示如何通过纯JavaScript自动为 h1 到 h6 标签添加序号，同时为这些序号添加不同的背景颜色，以突出显示层级结构。
大致效果嘛....
并不是，其实是长下面这熊样....
场景概述
我们有一段HTML内容，包含多个不同级别的标题标签（h1 到 h6），如下所示：
<div id="content" class="post-content">
<h1>大标题H1 - 1</h1>
<h2>H2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h2>H2</h2>
<h1>大标题H1 - 2</h1>
<h2>H2</h2>
<h3>H3</h3>
</div>我们的目标是：
- 对同一级别的标题进行独立排序，即
h1标签从 1 开始编号，h2标签也从 1 开始编号，依此类推。 - 为每个标题前的编号添加背景颜色，并且相同级别的标题背景颜色保持一致，不同级别的标题背景颜色不同。
核心技术方案
通过以下几个步骤实现：
- 使用JavaScript：选择
h1-h6标签，为它们添加带有编号的span元素。 - 动态设置背景颜色：根据标题级别，设置不同的背景颜色。
- 样式布局：确保编号与标题文本在视觉上良好对齐，并使用
display: flex;保证布局不会混乱。
JavaScript 实现步骤
第一步：选择所有 h1 到 h6 标签
我们可以使用 document.querySelectorAll() 来选择页面中的所有 h1-h6 标签，并且将它们按不同级别分组。为了确保标题级别独立排序，我们对每个级别的标题单独进行处理。
const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; // 定义标题级别
headingLevels.forEach(function(level) {
const headings = document.querySelectorAll('#content ' + level); // 获取每个级别的所有标题
});第二步：为每个标题编号
每个标题将会有一个独立的编号。对于同级标题，每出现一个，编号递增。
let counter = 1; // 初始化编号
headings.forEach(function(heading) {
const numberSpan = document.createElement('span');
numberSpan.textContent = counter; // 设置编号
counter++; // 递增编号
});第三步：添加背景颜色和样式
根据标题的级别（h1-h6），我们为编号设置不同的背景颜色。通过JavaScript，直接为编号的 span 元素设置样式。这里我们定义了一个颜色字典，保证不同级别的标题使用不同的颜色。
const backgroundColors = {
'h1': '#66BB6A', // Green
'h2': '#FF7043', // Orange
'h3': '#29B6F6', // Blue
'h4': '#AB47BC', // Purple
'h5': '#FFCA28', // Yellow
'h6': '#26A69A' // Teal
};
numberSpan.style.backgroundColor = backgroundColors[level]; // 根据标题级别设置背景颜色
numberSpan.style.color = 'white'; // 设置文本颜色为白色
numberSpan.style.padding = '5px 10px'; // 添加内边距
numberSpan.style.marginRight = '10px'; // 设置与标题文本的间距
numberSpan.style.borderRadius = '50%'; // 使其成为圆形
numberSpan.style.display = 'inline-block'; // 保证其为内联块元素第四步：将 span 元素插入标题中
通过 prepend 方法将 span 插入到标题的最前面，使编号出现在标题的前面。
heading.prepend(numberSpan); // 将带有编号的 span 插入到标题内容的前面完整的 JavaScript 代码
最终，我们得到完整的JavaScript代码如下：
document.addEventListener('DOMContentLoaded', function () {
const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const backgroundColors = {
'h1': '#66BB6A',
'h2': '#FF7043',
'h3': '#29B6F6',
'h4': '#AB47BC',
'h5': '#FFCA28',
'h6': '#26A69A'
};
headingLevels.forEach(function(level) {
const headings = document.querySelectorAll('#content ' + level);
let counter = 1;
headings.forEach(function(heading) {
const numberSpan = document.createElement('span');
numberSpan.textContent = counter;
numberSpan.style.backgroundColor = backgroundColors[level];
numberSpan.style.color = 'white';
numberSpan.style.padding = '5px 10px';
numberSpan.style.marginRight = '10px';
numberSpan.style.borderRadius = '50%';
numberSpan.style.display = 'inline-block';
heading.prepend(numberSpan);
counter++;
});
});
});样式布局
为了确保序号和标题在视觉上保持一致，我们使用了 flex 布局。通过在 h1-h6 标签上应用 display: flex，我们可以将序号和标题文本在同一行上显示，并保证它们垂直居中对齐。
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
display: flex;
align-items: center;
}最终效果
当我们将代码应用到页面后，浏览器会自动为每个 h1 到 h6 标签添加带有背景色的编号。每一级标题都从 1 开始独立排序，并且序号前的圆形块使用不同的颜色。通过这种方式，用户可以更加直观地感受到标题的层次结构。
完整html
<html>
<head>
<style>
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="content" class="post-content">
<h1>大标题H1 - 1</h1>
<h2>H2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h2>H2</h2>
<h1>大标题H1 - 2</h1>
<h2>H2</h2>
<h3>H3</h3>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Select headings from h1 to h6
const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
// Define background colors for each heading level (h1 to h6)
const backgroundColors = {
'h1': '#66BB6A', // Green
'h2': '#FF7043', // Orange
'h3': '#29B6F6', // Blue
'h4': '#AB47BC', // Purple
'h5': '#FFCA28', // Yellow
'h6': '#26A69A' // Teal
};
// Iterate through each heading level (h1 to h6)
headingLevels.forEach(function(level) {
// Select all headings of the current level (e.g., all h1s, all h2s)
const headings = document.querySelectorAll('#content ' + level);
// Initialize a counter for numbering
let counter = 1;
// Iterate through each heading and prepend the number with a styled span
headings.forEach(function(heading) {
// Create the number span element
const numberSpan = document.createElement('span');
numberSpan.textContent = counter; // Add the number
numberSpan.style.backgroundColor = backgroundColors[level]; // Set the background color for the current level
numberSpan.style.color = 'white'; // Make text white
numberSpan.style.padding = '5px 10px'; // Add padding around the number
numberSpan.style.marginRight = '10px'; // Add some spacing between the number and the heading text
numberSpan.style.borderRadius = '50%'; // Make it circular
numberSpan.style.display = 'inline-block'; // Ensure it's displayed inline
// Prepend the number span to the heading
heading.prepend(numberSpan);
// Increment the counter for the next heading of the same level
counter++;
});
});
});
</script>
</body>
</html>版权声明：本文为原创文章，版权归 全栈开发技术博客 所有。
本文链接：https://www.lvtao.net/dev/css-h-sort.html
转载时须注明出处及本声明
