寻求HTML progress元素实现方案：右侧添加随进度变化的文本

嘿，没问题！我来帮你实现这个进度条右侧文本同步移动的效果～ 核心思路是把进度条和文本放在一个容器里，用相对定位+绝对定位控制文本位置，再通过CSS变量和JavaScript同步进度值与文本的位置、内容。

步骤1：重构HTML结构 #

首先把每个progress元素和对应的文本包裹在一个容器里，这样方便我们定位文本：

<div class="progress-container">
  <progress value="60" max="100"></progress>
  <span class="progress-value">60%</span>
</div>
<div class="progress-container">
  <progress value="90" max="100"></progress>
  <span class="progress-value">90%</span>
</div>

<!-- 可选：加个按钮测试动态变化 -->
<button onclick="decreaseProgress()">减少第一个进度条</button>

步骤2：编写CSS样式 #

用容器的相对定位做基准，文本绝对定位在进度条右侧，通过CSS变量--progress-percent控制文本的水平位置，同时美化进度条的样式：

.progress-container {
  position: relative;
  margin-bottom: 1.5rem; /* 给进度条之间留点间距 */
  width: 350px; /* 自定义进度条宽度 */
}

progress {
  -webkit-appearance: none;
  width: 100%;
  height: 22px; /* 调整进度条高度 */
}

/* 进度条背景 */
progress::-webkit-progress-bar {
  background-color: orange;
  border-radius: 11px; /* 和高度匹配的圆角，更美观 */
}

/* WebKit内核浏览器的进度填充色 */
progress::-webkit-progress-value {
  background-color: #2d3748; /* 你可以换成自己喜欢的颜色 */
  border-radius: 11px;
}

/* 火狐浏览器的进度填充色兼容 */
progress::-moz-progress-bar {
  background-color: #2d3748;
  border-radius: 11px;
}

.progress-value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  left: calc(var(--progress-percent) * 100% + 10px); /* 10px是文本和进度条的间距 */
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap; /* 防止文本换行 */
}

步骤3：JavaScript同步逻辑 #

初始化时设置每个进度条的CSS变量和文本内容，同时监听progress的value属性变化，自动同步文本的位置和数值：

// 初始化所有进度条
const progressContainers = document.querySelectorAll('.progress-container');

progressContainers.forEach(container => {
  const progress = container.querySelector('progress');
  const valueSpan = container.querySelector('.progress-value');
  
  // 计算进度百分比并更新UI的函数
  const updateProgress = () => {
    const percent = progress.value / progress.max;
    // 更新CSS变量，控制文本位置
    container.style.setProperty('--progress-percent', percent);
    // 更新文本内容
    valueSpan.textContent = `${Math.round(percent * 100)}%`;
  };
  
  // 首次初始化
  updateProgress();
  
  // 监听进度值变化（动态修改时自动同步）
  const observer = new MutationObserver(updateProgress);
  observer.observe(progress, { attributes: true, attributeFilter: ['value'] });
});

// 测试动态修改的函数
function decreaseProgress() {
  const firstProgress = document.querySelector('.progress-container:first-child progress');
  if (firstProgress.value > 0) {
    firstProgress.value -= 10;
  }
}

效果说明 #

• 页面加载时，文本会自动定位到对应进度的右侧
• 当你通过JavaScript修改progress的value（比如点击测试按钮），文本会同步移动位置并更新显示的百分比
• 兼容Chrome、Firefox等主流浏览器

内容的提问来源于stack exchange，提问作者lilo