Javascript没有在视觉上更新文本与Webkit梯度

Javascript not visually updating Text with Webkit Gradient

本文关键字：文本 Webkit 梯度 更新 视觉上 Javascript      更新时间：2023-09-26

我有一些文字'foo'，使用渐变来给它上色。我想把这个文本更新为'bar'，但是当我这样做的时候，文本保持不变，直到我突出显示它，然后它就改变了。这里是示例代码的示例。有人知道怎么让它更新吗?注意:当前的渐变代码只适用于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);

你将不得不强制重新粉刷，类似于@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，可能不工作取决于你的用例，但应该有可能找到一个将工作在你计划支持的浏览器。如果这个没有，请告诉我。

我希望这对你有帮助!

我以前用过这个技巧来强制浏览器重新绘制元素:

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