javascript - 替代 HTML5 进度条

Question

背景

据我所知，对 HTML5 进度条的支持仍然是零星的，并且使它在每个浏览器或操作系统中显示相同的方法通常很复杂。

http://www.hongkiat.com/blog/html5-progress-bar/展示了如何在 css 中创建多个伪类，试图影响每个浏览器中的 progress 元素的样式。

progress {
    /* style rules */
}
progress::-webkit-progress-bar {
    /* style rules */
}
progress::-webkit-progress-value {
    /* style rules */
}
progress::-moz-progress-bar {
    /* style rules */
}

这似乎是一个非常臃肿的方法，因为样式将完全依赖于实验性兼容性规则。

有关样式化 HTML5 进度元素的更多信息:https://css-tricks.com/html5-progress-element/

问题

是否有更简单的一步解决方案来使用 HTML、CSS 和 Javascript 制作通用进度条？

Answer 1

是的。最简单的方法是将一个跨度放置在另一个跨度内。然后，所有样式都可以在几乎所有浏览器和操作系统中通用，您可以简单地使用 Javascript 修改内部 span 的 width 属性以更改其值。

<span id="progressContainer">
  <span id="progress" style="width:50%;"></span>
</span>

<style>
#progressContainer {
  display: inline-block;
  width: 400px;
  height: 4px;
}

#progress {
  display: block;
  height: 100%;
  background-color: green;
}
</style>

我做了 this codepen作为此方法的强大功能的示例。