JavaScript篩選器hueRotate不起作用

我試圖在JavaScript中將按鈕（profIcon）懸停時更改圖像的（#bgImage）色調。這種類型的按鈕是用JS創建的，其中有9個。JavaScript篩選器hueRotate不起作用

下面是創建DOM image element的代碼，設置它的來源，位置，大小和轉換。最後它將它附加到它的容器中。圖像顯示正確，應該在哪裏。

我使用的是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供應商前綴，因爲我使用Google Chrome。

我用鼠標光標在圖像上等待了1分鐘，認爲我的系統需要時間來處理轉換，但沒有發生任何事情。

有誰知道這是什麼問題？

來源

2015-04-18 Adam Benedek

要使用的正確字符串是hue-rotate，而不是hueRotate。以下應該工作：

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

來源

2015-04-18 22:20:47

謝謝你解決我的問題！出於某種原因，我也應該在過濾器的名稱中使用camelCase。 –

'style'對象的屬性是camelCased的，因此您可以使用點符號（'style.webkitFilter'）而不需要編寫'style ['webkit-filter']'。在javascript中，如果一個屬性名稱中包含「-'，那麼只能使用括號'[]'來訪問它。 –

JavaScript篩選器hueRotate不起作用

回答

相關問題