1

我添加了 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+");");

}

任何帮助将不胜感激。谢谢。

4

3 回答 3

3 
style.setAttribute(

setAttribute适用于元素，而不是样式。

并且background-color是样式属性，而不是属性。

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = ".."
于 2013-07-26T23:56:56.423 回答
3

至少，

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

应该改为

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

如果不进行更改，其余代码将根本无法运行，因为onchange()在没有括号的情况下调用事件处理程序onchange用于分配事件处理程序。

还

正如康纳的有用评论所指出的，安迪的回答包含部分解决方案，我还注意到您的代码中还有一个错误：

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

需要是这样的（加上现在逗号所在的位置，以及算术周围的括号以防止其左操作数过早转换为字符串）：

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

因此，将其插入安迪的答案中，该setColors函数的最后一行应该是这样的：

document.getElementsByClassName("previewAreaBox")[0].style.backgroundColor = "rgba(" +r+ ", " +g+ ", " +b+ ", " + (a/100) +");";
于 2013-07-26T23:59:47.523 回答
1

好的，所以这里有一些问题

1.你需要将函数分配给change事件，而不是调用change事件。

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(',') + ')';
于 2013-07-27T00:14:03.470 回答