jquery ui.progressbar label - 在背景传递字母上更改文本颜色答案

【问题标题】：jquery ui.progressbar label - Change text color on background passing letterjquery ui.progressbar label - 在背景传递字母上更改文本颜色
【发布时间】：2011-03-14 01:25:20
【问题描述】：

我已经使用this demo 为 jquery ui 进度条添加了一个标签。

我想要做的是根据进度条是否在字母后面来更改文本颜色。

我怎么知道这是否发生了？

【问题讨论】：

标签： jquery jquery-ui progress-bar jquery-ui-progressbar

【解决方案1】：

它有点难看，但如果你复制标签，一个在栏外，一个在里面，并使用overflow: hidden，你可以把它拉下来：

http://jsbin.com/ohiyo/21/

仅在 Chrome dev 和 firefox 4 中测试

【讨论】：

【解决方案2】：

像这样使用 .progressbar 的 change event：

updateProgressColor = function() {
  if( $(this).progressbar('percentage').toFixed(0) == 100 ) {
    $(this).css('background', '#F000');
  }
}

$('#progressbar').progressbar({
  change: updateProgressColor
});

【讨论】：

如果进度条完成了只会更新颜色，请看我的图片
我根本不会做你在 CSS 中要求的。在纯 CSS 和 Javascript 中没有可行的方法来完成您所要求的工作。

【解决方案3】：

if (newVal >= 50)
    $('.pblabel').css('color', newColor);
else
    $('.pblabel').css('color', defaultColor);

【讨论】：

请看附图，我希望它比那更精确。
仍然不是我需要的，标签可以是任何文本，我几乎需要找出每个字母相对于其父级的位置...
它很愚蠢，在早期发布的进度条中，他们实际上有这个，但他们把它拿出来了：/