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スタイルではなく要素に適用されます。

Andbackground-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

また

コナーの有益なコメントで指摘されているように、アンディの回答には解決策の一部が含まれており、コードにもう 1 つのエラーがあることにも気付きました。

"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 に答える