jQuery等价于css选择器progress::-webkit-progress-value
jQuery equivalent for css selector progress::-webkit-progress-value
我需要用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; }
...
它有效,但我对我的解决方案很不满意。
可以使用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/-希望它有帮助:)
progress::-webkit-progress-value
不是DOM元素(虽然它是Shadow DOM的一部分)。所以你不能用jQuery或任何DOM方法访问它。
这一切都归结为像你这样的变通方法。
编辑:事实证明,在最近的Chrome版本中,你实际上可以使用webkitShadowRoot
属性访问Shadow DOM。遗憾的是,它不能用于<progress />
元素。
我只想从js中改变栏的颜色,其他一切都保持静态。这是针对该特定场景的解决方案。此方法不能用于更改颜色以外的任何内容。
我将背景色设置为currentColor
(它与该元素上设置的color
相匹配)。
.progressbar-class::-webkit-progress-value
{
background-color: currentColor;
/* set anything else that won't change */
}
这意味着你可以使用jQuery或其他方法选择进度条元素本身,并设置它的颜色:
$(".progressbar-class").css("color", "red");
- 如何在构建node-webkit应用程序后获取外部资源
- node-webkit-从父窗口捕获iframe鼠标事件
- 节点webkit应用程序与终端通话
- 如何保护节点webkit应用程序上的字体
- 将webkit从CSS转换为JavaScript
- Chrome(webkit?)无法在幻灯片中正确显示图像
- Jquery工具在Webkit中不起作用
- 如何's css标记"-webkit最小设备像素比”;在Javascript中实现
- 如何从Node Webkit应用程序中退出外部CMD文件
- 动态更改Webkit筛选器值
- 当z索引为负值时,onclick在webkit或mozilla中不起作用
- 在javascript中与webkit转换作斗争
- -webkit转换在JavaScript旋转动画中不起作用(没有JQuery)
- 使用-webkit transform:scale()缩放图像
- 在Node Webkit应用程序中从DOM单击按钮时运行批处理文件
- -当在JQuery Slider上添加-webkit线性梯度时,moz线性梯度会被破坏
- webkit输入类型=在错误日期发送空值的日期
- 节点Webkit's(nwjs)节点远程使用
- 重置transform:rotate()而不调用-webkit transition:style
- webkit中的自动滚动转盘