javascript getElementsByClassName和setAttribute不起作用

时间:2013-07-26 23:53:52

标签: javascript styles getelementsbyclassname

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

}

非常感谢任何帮助。感谢。

3 个答案:

答案 0 :(得分:3)

style.setAttribute(

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

background-color是样式属性,而不是属性。

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

答案 1 :(得分:3)

至少,

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) +");"

所以把它插入到Andy的答案中,setColors函数应该有这样的最后一行:

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

答案 2 :(得分:1)

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

<强> 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(',') + ')';