javascript getElementsByClassName和setAttribute不起作用

Question

我添加了4個“范圍”類型的輸入，並使用它們的值來設置另一個元素的RGBA值，但是它不起作用。

window.onload = init;

function init(){
document.getElementById("colorR").onchange() = setColors;
document.getElementById("colorG").onchange() = setColors;
document.getElementById("colorB").onchange() = setColors;
document.getElementById("Opacity").onchange() = setColors;  
}
function setColors(){
var r = document.getElementById("colorR").value;
var g = document.getElementById("colorG").value;
var b = document.getElementById("colorB").value;
var a = document.getElementById("Opacity").value;

    //alert(r+", "+g+", "+b+", "+a);

document.getElementsByClassName("previewAreaBox")[0].style.setAttribute(
"background-color", "rgba(",r+", "+g+", "+b+", "+a/100+");");

}

任何幫助將不勝感激。 謝謝。

Answer 1

style.setAttribute(

setAttribute適用於元素，而不適用於樣式。

而且background-color是樣式屬性，而不是屬性。

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = ".."

Answer 2

至少，

document.getElementById("colorR").onchange() = setColors;

應該更改為

document.getElementById("colorR").onchange = setColors;

如果不進行更改，其余代碼將完全無法運行，因為onchange()調用事件處理程序，而onchange不帶括號用於分配事件處理程序。

也

正如Connor的有用評論所指出的那樣，Andy的答案包含了解決方案的一部分，而且我還注意到您的代碼中還有一個錯誤：

"rgba(",r+", "+g+", "+b+", "+a/100+");"

必須是這樣的（加上現在逗號，並在算術上加上括號以防止其左操作數過早地轉換為字符串）：

"rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");"

因此將setColors函數插入Andy的答案中，其最后一行應如下所示：

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = "rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");";

Answer 3

好了，這里有一些問題

1.您需要將功能分配給更改事件，而不是調用更改事件。

2.您無需在樣式上使用setAttribute，而是使用它在元素上設置屬性。

3.您應該緩存元素。

window.onload = init;


var elementR, elementG, elementB, opacityElement;

function init(){
   elementR = document.getElementById("colorR");
   elementG = document.getElementById("colorG");
   elementB = document.getElementById("colorB");
   opacityElement = document.getElementById("Opacity");

   // Set change events
   elementR.onchange = 
   elementG.onchange = 
   elementB.onchange = 
   opacityElement.onchange = setColors;
}
function setColors(){
    var r = elementR.value,
        g = elementG.value,
        b = elementB.value,
        a = opacityElement.value,
        preview = document.getElementsByClassName("previewAreaBox")[0];
        preview.style.backgroundColor =  'rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')';
}

---

Element.onchange() = something; 

因為onchange();不起作用 實際上觸發了事件，並且沒有為其分配功能。

您也可以像這樣將Array.join用於rgba

var rgba = [elementR.value, elementG.value, elementB.value, 
            opacityElement.value / 100];
preview.style.backgroundColor =  'rgba(' + rgba.join(',') + ')';