我正在尝试在我的元素中使用 JavaScript 更改线性渐变。我的问题是运行代码后没有任何反应。如果我尝试直接在我的 CSS 类容器中使用线性渐变字符串，一切正常，但无法通过 JavaScript 更改它。这是我要运行的代码:
function init() {
var Lohn = "undefined";
var Datum = "undefined";
var Pausenstueck = "undefined";
var Zakstueck = "undefined";
var Ueberstundenstueck = "undefined";
var StundeKoord = "undefined";
var Tagesdauer = "undefined";
let UebersichtTemplate = document.createElement("dd");
let UebersichtDD = document.getElementById("Uebersicht_Window_child");
UebersichtTemplate.innerHTML = "<span class='textRight'>" + Lohn + "</span><span class='text'>" + Datum + "</span>";
let a = document.importNode( UebersichtTemplate,true);
a.classList.add("percentage", "percentage-" + Math.round(StundeKoord*Tagesdauer));
let colorString = "linear-gradient(to right, #9c9e9f 0%,#9c9e9f " + Pausenstueck + Zakstueck + Ueberstundenstueck + " 100%);"
UebersichtDD.appendChild(a);
a.style.backgroundImage = '-webkit-linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%, #F53323 50%, #F53323 100%)';
}
document.addEventListener("DOMContentLoaded", init);<body>
<div id="Uebersicht_Window_child"></div>
</body>我已经尝试使用双引号代替单引号，但它也不起作用。留下“-webkit-”也不能解决我的问题……我绝对不知道这个问题。希望你们能帮助我:)
谢谢!
最佳答案
有一个主要问题:您实际上从未将导入的 dd 元素插入到文档中:
The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the current document later.
(强调我的)
还有一些其他问题，主要是围绕代码结构和样式——但它们可能与核心问题无关——还有创建 colorString 的语法问题，这可能会有所贡献。
function init() {
var Lohn = "undefined";
var Datum = "undefined";
var StundeKoord = "undefined";
var Tagesdauer = "undefined";
// -----------------------------
var Pausenstueck = "#9c9e9f 50%";
var Zakstueck = "#F53323 50%";
var Ueberstundenstueck = "#F53323 100%";
let UebersichtTemplate = document.createElement("dd");
UebersichtTemplate.innerHTML = "<span class='textRight'>" + Lohn + "</span>" +
"<span class='text'>" + Datum + "</span>";
let a = document.importNode( UebersichtTemplate, true );
a.classList.add( "percentage", "percentage-" + Math.round(StundeKoord*Tagesdauer) );
a.style.backgroundImage = `-webkit-linear-gradient(top right, #9c9e9f 0%, ${Pausenstueck}, ${Zakstueck}, ${Ueberstundenstueck} )`;
// insert the imported node.
document.body.appendChild(a);
}
document.addEventListener("DOMContentLoaded", init);<body>
<div id="Uebersicht_Window_child"></div>
</body>关于javascript - 使用 Javascript 更改线性渐变不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56210752/