使用Javascript更改线性渐变不起作用

Question

我正在尝试在我的项目中使用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-”也无法解决我的问题......我绝对不知道这个问题。 希望你们能帮助我:)

谢谢！

Answer 1

有一个主要问题：您从未实际插入导入到文档中的dd元素：

来自Document .import Node（）：

Document对象的importNode（）方法从另一个文档创建一个Node或DocumentFragment的副本， 以便稍后插入到当前文档中 。

（强调我的）

还有一些其他问题，主要是围绕代码结构和样式 - 但它们可能与核心问题无关 - 而且还有创建可能有贡献的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更改线性渐变不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-05-19 19:09:23

使用Javascript更改线性渐变不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-19 19:09:23

解决方案1
0 已采纳 2019-05-19 19:09:23