Javascript 没有使用 Webkit Gradient 在视觉上更新文本答案

【问题标题】：Javascript not visually updating Text with Webkit GradientJavascript 没有使用 Webkit Gradient 在视觉上更新文本
【发布时间】：2016-06-28 20:38:21
【问题描述】：

我有一些文本'foo'，它使用渐变来着色。我想将此文本更新为“栏”，但是当我这样做时，文本保持不变，直到我突出显示它，然后它发生变化。带有示例代码的 jsfiddle 是 here。谁能弄清楚如何使它更新？注意：目前的渐变代码只适用于 Chrome

HTML：

<div id="gradient_div">
  <p id="gradient_text" onload="update">
    Foo
   </p>
</div>

CSS：

#gradient_div
{
  background: linear-gradient(#000000,#ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Javascript：

setTimeout(function(){
document.getElementById("gradient_text").innerHTML="bar";
},500);

【问题讨论】：

你不想在文本更新后渐变？

标签： javascript html css text linear-gradients

【解决方案1】：

您将不得不强制重新绘制，类似于@BrianDiesel 所说的，但可能需要更多时间。这应该有效：

setTimeout(function(){
  var elem = document.getElementById("gradient_text");
  elem.innerHTML = "bar";
  // force repaint
  var display = elem.style.display;
  elem.style.display = 'none';
  setTimeout(function(){
    elem.style.display = display;
  }, 50);
}, 500);

#gradient_div {
  background: linear-gradient(#000000,#ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="gradient_div">
  <p id="gradient_text" onload="update">
    Foo
   </p>
</div>

本质上，这些都是 hack，可能无法根据您的用例工作，但应该有可能找到一种适用于您计划支持的浏览器的方法。如果这个没有，请告诉我。

希望对你有帮助！

【讨论】：

谢谢！这完美无缺。我看到你的超时有 50 毫秒的延迟，为什么是 50 毫秒？只是为了确保它有时间在视觉上消失吗？
不客气！我不是 100% 确定，我熟悉这些方面的一些 hack，所以我只是尝试了一些变体并且它起作用了。但出于好奇，我还是继续在此处发布了刚才的问题：stackoverflow.com/q/38086610/1666547 欢迎关注它以获得更详细的答案。
你运行的是什么浏览器和版本？

【解决方案2】：

我过去曾使用过这个技巧来强制浏览器重绘元素：

setTimeout(function(){
  var elm = document.getElementById("gradient_text");
  elm.innerHTML="bar";
  elm.style.display = 'none';
  elm.style.display = 'block';
},500);

【讨论】：