設置HTML進度條

Question

的innerHTML的我有一個簡單的進度條<progress value="22" id = "timerProgress"></progress>

我已成功使用jQuery它的價值，但我想寫的文字像Remaining : 10 sec裏面的進度條來改變。

我嘗試了innerHTML和html屬性，但沒有成功。

如何去呢？

Answer 1

您可以使用 '前' 或 '後' 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/

Answer 2

我認爲你必須添加另一個元素。我嘗試在進度條上使用僞元素，但由於某種原因，它不起作用（只在Safari中嘗試過）。

http://jsfiddle.net/smt6J/

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; 
}