Question

我有一个简单的进度条<progress value="22" id = "timerProgress"></progress>

我已设法使用jQuery更改其值，但我想在进度条中编写Remaining : 10 sec文本。

我尝试了innerHTML和html属性但是没有用完。

如何去做？

Answer 1

我认为你必须添加另一个元素。我尝试在进度条上使用伪元素，但由于某种原因它不起作用（仅在Safari中尝试过）。

HTML

<div id="progress">
    <progress max="100" value="22" class="progressBar"></progress>
    <div class="progressText">22% Done</div>
</div>

JQuery的

$('#progress .progressBar').val(50);
$('#progress .progressText').text('50% Done');

CSS

#progress {
    position:relative;
}
#progress .progressBar {
    position: absolute;
    left:0;
    top:0;
}
#progress .progressText {
    position: absolute;
    left:0;
    top:0;
}

Answer 2

您可以使用'之前'或'之后'CSS伪元素（注意：此时此方法似乎仅适用于Chrome）：

progress:before {
  content:attr(value);
}

或创建另一个属性并从JavaScript更新：

<progress value="22" id="timerProgress" data-content="Remaining : 10 sec"></progress>

progress:before {
  content: attr(data-content);
}

var secondsRemaining = 10;
document.getElementById('timerProgress').setAttribute('data-content', 'Remaining : ' + secondsRemaining + ' sec');

小提琴：http://jsfiddle.net/imcg/v4xEB/

设置HTML进度条的innerHTML

2 个答案: