Question

我有一些文字＆＃39; foo＆＃39;，它使用渐变为它着色。我想将此文本更新为＆＃39; bar＆＃39;，但是当我执行此操作时，文本保持不变，直到我突出显示它，然后更改。一个带有示例代码的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 Gradient

2 个答案: