0

This is how I get the bar:

var bar = $('#progressbar');

I can style and animate it just fine, with either of:

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

But how can I adjust the CSS for JUST the progress bar value element?

Like I can do in my styles.css file:

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

2 回答 2

0

如果您想在值更改时更改 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实际上在 jQuerychange()中<progress>不起作用（这并不意味着真正的 javascript 对象没有onchange属性），所以这个例子不会真正起作用

查看更新的演示

于 2013-07-02T08:33:36.357 回答
0

试试看，希望对你有帮助

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

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

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

于 2013-07-02T08:20:30.993 回答