jQuery等价于css选择器progress::-webkit-progress-value

Question

我需要用JS (jQuery)调整HTML5 <progress> -Bar的过渡时间，但我找不到jQuery中正确的选择器。

我的当前尝试:

CSS:

progress::-webkit-progress-value {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s; /* Works like a charm */
}

JavaScript (with no success):

// These lines do nothing when the progress value changes:
$(".progressSelectorClass[progress-value]").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass > *").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass").css({"-webkit-transition" : "all 6s"});
// This gets an error:
$(".progressSelectorClass::-webkit-progress-value").css({"-webkit-transition" : "all 6s"});

是否有机会在JavaScript中选择progress::-webkit-progress-value(有或没有jQuery)?

在这个jsFiddle中，你会更清楚地看到我试图做什么:http://jsfiddle.net/rD5Mc/1/

更新:

我通过添加/更改<progress>元素的data-animation-time参数，并创建了几个css类，如:

progress[data-animation-time="5"]::-webkit-progress-value { -webkit-transition: all 5s; }
progress[data-animation-time="10"]::-webkit-progress-value {    -webkit-transition: all 10s;    }
progress[data-animation-time="15"]::-webkit-progress-value {    -webkit-transition: all 15s;    }
progress[data-animation-time="20"]::-webkit-progress-value {    -webkit-transition: all 20s;    }
progress[data-animation-time="25"]::-webkit-progress-value {    -webkit-transition: all 25s;    }
...

它有效，但我对我的解决方案很不满意。

Answer 1

可以使用javascript修改css规则!

var rule;
$(".animationtimeFirst").change(function() {
    time = $(this).val();

    // Write out out full CSS selector + declaration
    s = '.progressselector::-webkit-progress-value { -webkit-transition: all ' + time + 's; }';
    // Check the rules
    // If there's no rules,
    if ((!rule && rule !== 0) || !document.styleSheets[0].cssRules.length) {
        // Make one! -- Insert our CSS string into the page stylesheet
        rule = document.styleSheets[0].insertRule(s, 0);
        // I think this code is different in IE, beware!
        console.log('Our rule is #' + rule);
    } else {
    // If we already have a rule we can change the style we've implement for the psuedo class
    document.styleSheets[0].rules[rule].style.webkitTransitionDuration = time.toString() + 's';
    }
});

这是一个更新的小提琴:http://jsfiddle.net/trolleymusic/MHYY8/3/-希望它有帮助:)

Answer 2

progress::-webkit-progress-value不是DOM元素(虽然它是Shadow DOM的一部分)。所以你不能用jQuery或任何DOM方法访问它。

这一切都归结为像你这样的变通方法。

编辑:

事实证明，在最近的Chrome版本中，你实际上可以使用webkitShadowRoot属性访问Shadow DOM。遗憾的是，它不能用于<progress />元素。

Answer 3

我只想从js中改变栏的颜色，其他一切都保持静态。这是针对该特定场景的解决方案。此方法不能用于更改颜色以外的任何内容。

我将背景色设置为currentColor(它与该元素上设置的color相匹配)。

.progressbar-class::-webkit-progress-value 
{
    background-color: currentColor;
    /* set anything else that won't change */
}

这意味着你可以使用jQuery或其他方法选择进度条元素本身，并设置它的颜色:

$(".progressbar-class").css("color", "red");