JavaScript 过滤器hueRotate 不起作用

Question

我试图在将鼠标悬停在 JavaScript 中的按钮 (profIcon) 上时更改图像 (#bgImage) 的色调。这种类型的按钮是用JS创建的，共有9个。

这是创建 DOM 图像元素 的代码，设置其源、位置、大小和过渡。最后它将它附加到它的容器中。图像正确地显示在它应该在的位置。

我使用 quickID 代替 document.getElementById，并且它工作正常，没有错误。

var bgImage = document.createElement("img");
bgImage.id = "bgImage";
bgImage.src = "./resources/images/backgrounds/profession/selector.jpg";
bgImage.style.position = "absolute";
bgImage.style.left = "0px";
bgImage.style.top = "0px";
bgImage.style.width = "100%";
bgImage.style.height = "100%";
bgImage.style.zIndex = 1;
bgImage.style.webkitTransition = "all 0.5s ease";
quickID("centerdiv").appendChild(bgImage);

以下是将鼠标悬停在图像上时运行的代码:

profIcon.onmouseover = function () {
    var thisNr = this.id.substr(8); //last char of the profIcon ID; number between 0 and 8
    var newHue = profTomb[thisNr][3]; //this contains the value and only that.
    console.log(newHue); //always returns the correct value
    quickID(this.id).style.webkitFilter = "grayscale(0%)"; //this part works, too
    quickID("bgImage").style.webkitFilter = "hueRotate(" + newHue + "deg)";
}

我的问题:由于某种原因，过滤器不适用。 newHue 要么是正值 (75)，要么是负值 (-23)，并且它已正确插入，如控制台日志中所示。我只使用 webkit vendor 前缀，因为我使用 Google Chrome。

我将鼠标光标放在图像上等待了长达 1 分钟，认为我的系统需要时间来处理转换，但什么也没发生。

有谁知道问题出在哪里吗？

Answer 1

正确使用的字符串是hue-rotate，而不是hueRotate。以下内容应该有效:

quickID("bgImage").style.webkitFilter = "hue-rotate(" + newHue + "deg)";