替代HTML5進度條

Question

背景

從我所看到的情況來看，對HTML5進度條的支持仍然很少，並且使它在每個瀏覽器或操作系統中都顯示為相同的方法通常很復雜。

http://www.hongkiat.com/blog/html5-progress-bar/展示了如何在css中創建多個psuedo類，這些類試圖影響每個瀏覽器中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修改內部跨度的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>

我以該代碼筆為例說明了該方法的強大功能。