Javascript 未使用 Webkit 渐变以视觉方式更新文本

Question

我有一些文本 'foo'，它使用渐变来为其着色。我想将此文本更新为 'bar'，但是当我这样做时，文本保持不变，直到我突出显示它，然后它才发生变化。带有示例代码的 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);

Answer 1

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

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

Answer 2

您将不得不强制重绘，类似于@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>

基本上这些都是技巧，根据您的用例可能无法正常工作，但应该可以找到适合您计划支持的浏览器的技巧。如果这个没有，请告诉我。

希望对您有所帮助！

Javascript 未使用 Webkit 渐变以视觉方式更新文本

Javascript not visually updating Text with Webkit Gradient

javascript

html

css

text

linear-gradients