有没有办法通过网页上的字符“中途”更改文本的颜色？
Posted
技术标签:
【中文标题】有没有办法通过网页上的字符“中途”更改文本的颜色？【英文标题】：Is there any way to change the color of text "halfway" through a character on a webpage? 【发布时间】：2011-09-09 15:55:27 【问题描述】：我在一些桌面应用程序中看到的一件事是能够随着背景的变化而改变文本的颜色——有效地在单个字符上使用多种颜色。我在进度条中最常看到这种情况，进度条显示进度条内的百分比。一般会使用较深的背景色作为进度条颜色，随着进度的推进，深色与深色文本的对比不够，因此一旦进度条与文本重叠，文本颜色就会发生变化。这张图片应该能解释我的意思：
如您所见，文本在 0% 时为黑色——没有深色背景时。当背景图像完全进展到 100% 时，文本是完全白色的。但在中间，如您所见，在 50% 处，文本是半黑半白，在本例中实际上是在“0”字符上分割的。
有没有办法在网页上做到这一点？ CSS，图像，Jquery，否则？ （最好不要使用 Flash 或 Java 小程序——我真的想知道基于 html 的解决方案是否可行。）谢谢！
【问题讨论】：
【参考方案1】：我会帮你开始的：
-
创建两个大小相同的“进度条”(
divs)。将它们的大小设置为 100% 时的全宽。
根据上面的示例，将一个条设置为具有白色背景的黑色文本，将另一个设置为具有蓝色背景的黄色文本。
在父级div 中设置黄色/蓝色条，并在每个百分比增加时增加父级的宽度。将父级置于黑/白条之上。
同样在每次增加时，更新两个进度条的标签以表示百分比。
这将模拟相同的效果，而无需手动绘制半个字符。这在 CSS 中会很困难，因为您必须将一个 放在另一个之上。
这样做的好处是您可以轻松地显示半画的字符。不过，已经有一个可以使用的 jQuery 进度条了。
【讨论】：
这个，在父 div 上有overflow: hidden。
是的，CSS 相当棘手。但我设法做到了。 :) 看看我的回答。【参考方案2】：
这真的很有趣。这是您的进度条。在 IE5.5+ 和 Safari 5（我测试过的浏览器）中运行良好。
使用系统颜色。 :D
Visualization here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progress</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.progressbar, .progressbar strong
display:block;
height:1.2em
.progressbar, .progressbar em
width:10em
.progressbar strong, .progressbar em
position:absolute;
top:0;
left:0
.progressbar
font:status-bar;
color:windowtext;
background:window;
border:1px solid windowframe;
text-align:center;
position:relative
.progressbar strong
background:highlight;
width:0;
font-weight:normal;
overflow:hidden
.progressbar em
color:highlighttext;
font-style:normal
</style>
<script type="text/javascript">
function progress(bar)
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
var value = parseInt(bar.getAttribute('progress'), 10);
value += 1;
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
if (value < 100)
setTimeout(function() progress(bar) , 20);
window.onload = function()
var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++)
if (span[i].className == 'progressbar')
span[i].setAttribute('progress', 0);
var el1 = document.createElement('span');
el1.innerHTML = '0%';
span[i].appendChild(el1);
el1 = document.createElement('strong');
var el2 = document.createElement('em');
el2.innerHTML = '0%';
el1.appendChild(el2);
span[i].appendChild(el1);
progress(span[i]);
</script>
</head>
<body>
<p><span class="progressbar"></span></p>
</body>
</html>
请注意，我使用setAttribute 使用自定义属性名称将值分配给进度条。
修改脚本以实现真正的进度
上面的例子只是一个虚拟的进度条，因为它使用了一个计时器来增加值。要进行真正的进步，您必须稍微修改脚本。您可以更改函数progress 以便将值添加 到当前值，或者您可以这样做以便它设置 值。第二种方法可能是您想要使用的。
function add(bar, value)
bar = document.getElementById(bar);
value = parseInt(bar.getAttribute('progress'), 10) + value;
value = value > 100 ? 100 : value < 0 ? 0 : value;
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
function set(bar, value)
value = value > 100 ? 100 : value < 0 ? 0 : value;
bar = document.getElementById(bar);
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
如果您确保传递给函数的值介于 0 和 100 之间，则可以省略 value = value > 100 ? 100 : value < 0 ? 0 : value。
Test it here
编辑：
我将 innerText 更改为 innerHTML 以便它可以在 Firefox 中运行。我没有意识到这一点。我还将 CSS display:inline-block 更改为 display:block。我知道这样你就不能再让进度条内联了，但这使它在 Netscape 9 中工作。
【讨论】：
非常令人印象深刻的剧本，Midas！但是，这似乎不再适用于 Webkit 浏览器（Chrome 30.0.1599.101、Safari 7.0）。 感谢您花费大量时间来制定可行的解决方案，这可能不是“公认的答案”，但不要低估这样的资源对他人的帮助！我实际上并没有使用你的代码，但它确实激发了我想出一些东西:) 它似乎坏了，因为 Chrome 不尊重系统颜色，因此文本颜色始终为黑色。在 CSS 中设置固定颜色可以解决这个问题。【参考方案3】：这是另一个实现：http://jsfiddle.net/3rcav4s4/。
HTML：
<div class = "progressBar">
<div class = "background">0%</div>
<div class = "container">
<div class = "foreground">0%</div>
</div>
</div>
<button>Play</button>
CSS：
*:not(button)
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
body
padding: 10px;
.progressBar
width: 150px;
height: 15px;
border: 1px solid #000;
position: relative;
margin-bottom: 5px;
.progressBar .background,
.progressBar .foreground
width: 150px;
height: 13px;
font: normal 10px/13px Sans-Serif;
text-align: center;
.progressBar .container
position: absolute;
top: 0;
left: 0;
width: 0%;
overflow: hidden;
.progressBar .foreground
background-color: navy;
color: yellow;
JS/jQuery:
$(function()
$("button").click(function()
var start = 0;
var interval = setInterval(function()
if(start >= 100) clearInterval(interval);
$(".progressBar").find(".background, .foreground")
.text(start + "%")
.end()
.find(".container")
.css("width", start++ + "%");
, 10);
);
);
【讨论】：
以上是关于有没有办法通过网页上的字符“中途”更改文本的颜色？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以更改 Android SearchView 上的文本颜色？
Flutter Forms：有没有办法根据某些条件更改输入文本的颜色？