如何使用 JQuery 设置 HTML5 进度条的值？

Question

这就是我获得酒吧的方式：

var bar = $('#progressbar');

我可以很好地设置它的样式和动画，使用以下任何一种：

bar.css(...)
bar.animate(...)

但是我怎样才能调整 CSS 只为进度条值元素呢？

就像我可以在我的 styles.css 文件中做的那样：

progress::-webkit-progress-value {
    background:white;
    opacity: 0.7;
}

Answer 1

试试吧，希望对你有帮助

<progress id="progressBar" value="10" max="100" />

$('#click').click(function(){
    $('#progressBar').val(60);
})

用于演示 - http://jsfiddle.net/fJxGG/196/

Answer 2

如果您想在值更改时更改 css，请尝试：

var bar = $('#progressbar');
bar.change(function() {
    $(this).css('opacity',parseInt($(this).val())/100);
});

编辑 据我了解，您需要对条带进行样式设置，以呈现价值，我必须大量编辑我的答案。事实上，我没有研究使用 jQuery 和/或 JavaScript 来操作 css 伪选择器的方法，但是有一种方法可以创建样式表并动态地更改它。就是这样：

    $(document).ready(function() {
        var style=document.createElement("style");
        var sheet = document.head.appendChild(style).sheet;
        var bar = $('#progressbar'); // your progress bar
// first of all, i create first rule
        sheet.insertRule('progress::-webkit-progress-value{ background-color: rgb('+bar.val()+','+bar.val()+','+bar.val()+');}');
        bar.change(function() {
// because here it throws an error if no 1st rule
            sheet.deleteRule(0);
            sheet.insertRule('progress::-webkit-progress-value{ background-color: rgb('+bar.val()+','+bar.val()+','+bar.val()+');}');        
        });

    });

我没有测试上面的代码（只是在这里改变了它），但它给出了一个基本的表示。 Here is 带有“加号”按钮的工作示例，可增加值并更改 backgroung-color 的确切值栏

我也很失望，HTML5+JS 在这方面太差了，也许以后……

EDIT2 实际上 change() for <progress> 由于某种原因在 jQuery 中不起作用（这并不意味着真正的 javascript 对象没有 onchange 属性），所以这个例子不会真的有用

查看UPDATED DEMO