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

Question

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

var bar = $('#progressbar');

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

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

但是如何调整进度条值元素的 CSS？

就像我可以在我的样式.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()+');}');        
        });
    });

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

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

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

查看更新的演示