rgbaのRGB値のライブ編集

Question

divの1つの色をユーザーが変更できるようにするサイトを構築しています。私はそれが透明にしたいので、色はrgbaで設定されています。

私が問題になっているのは、カラーピッカーが見つかりましたが、私は不透明度を悪くすることなくRGBを変更します。ここでは、私がこれまでにそれを持っている方法は次のとおりです。

<input class="color" type="text" onchange="document.getElementById('main-info').style.backgroundColor = '#' + this.color;"> 

はもちろん、私は不透明度を殺すライブバージョン、についての六角とのためにRGBAを交換しています。私が試した他のものがある：成功したRGBA値を取得しますが、私はそれがRGBAに適切に挿入するために取得することはできません

<input class="color" type="text" onchange=" document.getElementById('id_info_box_bg_color').value = (Math.floor(this.color.rgb[0]*255)) + ', ' + (Math.floor(this.color.rgb[1]*255)) + ', ' + (Math.floor(this.color.rgb[2]*255));"> 

。

誰かがrgbaの一部をどのように置き換えることができるか知っていますか？だから、僕はRGBA中のX（X、X、X、0.5）を変更してい

Answer 1

と同じ正味の効果を得ることができる必要がありますRGBA値のほんの一部を置き換えることができますが、div要素の色はCSSでRGBAに設定されている場合は、CSSのプロパティを求めることにより、RGBAの文字列値を取得できます。

$('#myDiv').css('background-color'); 

これは、その文字列を返します。 "rgba（255、0、0、0.496094）"、または不透明度が1に設定されている場合、 "rgb（255、0、0）"のようになります。アルファチャネルの値を取得し、新しいrgba値を設定するときに使用します。文字列からその値を抽出する効率的な方法を見つけることができる（または少なくとも私のように怠惰ではない）賢明な人がいると確信しています。

$('#myDiv').css('background-color', 'newColor'); 

ここで、new colorは、元の文字列から抽出されたアルファ値と同じものを使用して、CSSで設定したときと同じ形式で作成する文字列です。

Answer 2

あなたは私があなたの場合は知らないCSS

#id_info_box_bg_color { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // ms ie 8 first! 
    filter: alpha(opacity=50);     // rest of the ie browsers second! 
    opacity: .5; // standard compliant browsers 
}