Javascriptではどのようにrgbを指定せずにrgbaを設定できますか？

私はその後、私は背景がゆっくりとJavaScriptでJavascriptではどのようにrgbを指定せずにrgbaを設定できますか？

myEle.style.backgroundColor = "rgba(x,x,x,0.1)"; // I have to know the rgb values to update the alpha value

要素の不透明度の値を変更することでフェードインになり、タイマーを持っている背景色（RGBAに設定されているHTML要素）

<div style="background-color: rgba(2,100,100,0);"> </div>

を持っています

rgb値を変更しないでrgba（）の値を設定する方法はありますか？

多分このようなことができますか？

var r = myEle.style.r; 
var g = myEle.style.g; 
var b = myEle.style.b; 
myEle.style.backgroundColor = "rgba("+r+","+g+","+b+",0.1)";

出典

2011-11-18 Jake M

状況によっては、不透明度が問題になる場合があります。しかし、それはバックグラウンドだけでなく要素全体を消滅させるので、おそらくオプションではないと仮定しています。 – qw3n

、私は一緒にこれを入れています。

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
     #element { 
     background-color: rgb(10,10,10); 
     background-color: rgba(10,10,10,1); 
     } 
    </style> 
    <script type="text/javascript">  
     HTMLElement.prototype.alpha = function(a) { 
     current_color = getComputedStyle(this).getPropertyValue("background-color"); 
     match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[\.\d+]*)*\)/g.exec(current_color) 
     a = a > 1 ? (a/100) : a; 
     this.style.backgroundColor = "rgba(" + [match[1],match[2],match[3],a].join(',') +")"; 
     } 
    </script> 
    </head> 
    <body> 
    <div id="element"> 
     This is some content. 
    </div> 
    <script type="text/javascript"> 
     e = document.getElementById('element'); 
     e.alpha(20); 
    </script> 
    </body> 
</html>

RGBAはCSS3であるので、あなたがあなたのCSSで自分の価値観、およびカスケードを定義していることを確認します。
アルファに1以上の数値を渡すこともできます。これは100で割ることができます（パーセンテージを考えるときは小数点以下を扱うのが嫌です）。
お楽しみください！

出典

2011-11-18 07:52:13

コードを編集して、より明白な欠点を修正しました。一部の機能テストはまだ行方不明です。これは、元のRGB値の形式を本当に気にしないので、青色のRGBコンポーネントの後に可能な値ではなく、より単純なことに注意してください。また、除算には必ず丸め誤差の可能性があるため、避けるべきです。 – PointedEars

何らかの理由で私の編集が受け入れられませんでした。 JFTR、元のコードにはいくつかの問題があります：要素プロトタイプの拡張、宣言されていない変数、missing document.defaultView、s.match（/ ...）の代わりにsecond getComputedStyle（）、/.../g.exec /）、スライスの代わりに繰り返される要素参照、不十分な数、不足しているパーセントマッチ（CSS 2を遵守したい場合は、1/3）、1つの不要な割り当てがあります。 – PointedEars

これは役に立ちますか？

http://www.phpied.com/rgb-color-parser-in-javascript/

これは、ほかに役立つかもしれません。遊ん一部、及びgetComputedStyleの発見後

Convert RGBA color to RGB

出典

2011-11-18 05:00:25 r0ast3d

あなたは、文字列、あなたはまた、elem.style.opacity=0.5またはHTML style="opacity:0.5"でを使用することができますどんな
'rgba(1,1,1,0.3)'.replace(/[^,]+(?=\))/, '0.5')

出典

2011-11-18 08:19:30 Leonid

それを愛する！正規表現の岩： – rikpg

置き換えを得ました。子ノードもフェードすることに注意することが重要です。

出典

2011-11-18 08:24:11 rekire

なぜこれがダウン投票されたのですか？ – Peter

+11

不透明度はアルファチャンネルによる背景不透明度と同じではありません。これは質問が求めていることではありません。不透明度は、バックグラウンドの不透明度とdivの内容を減らしますが、質問だけで背景のみを行う方法が求められます。 – Frug

私はこれもやっていましたが、もう少し具体的な書き方をしました。その後、

$.fn.setAlpha = function (options) { 
    var settings = $.extend({ 
     alpha: 0.5, 
     min: 0, 
     max: 1 
    }, options); 
    return this.each(function() { 
     var color = $(this).css('background-color'); 
     if (color.substring(0,4) === 'rgba') { 
      var a; 
      if (settings.alpha <= settings.min) { 
       a = settings.min; 
      } else if (settings.alpha >= settings.max) { 
       a = settings.max; 
      } else { 
       a = settings.alpha; 
      } 
      var rgba = color.replace(/[^,]+(?=\))/, a); 
      $(this).css('background-color', rgba); 
     } 
    }); 
} 

$.fn.getAlpha = function() { 

    var color = this.css('background-color'); 
    if (color.substring(0,4) === 'rgba') { 
     var alpha = color.split(','); 
      alpha = alpha[alpha.length - 1].trim(); 
      alpha = alpha.substring(0, alpha.indexOf(")")); 
     return alpha; 
    } else { 
     return 1; 
    } 
}

はあなたが下にスクロールすると透明にDIVを設定すると、元の不透明度にそれをフェードインするために、このような何かをするためにそれらを使用します：私は、最小と最大の不透明度を受け入れるjQueryプラグインに入れ

//get original opacity 
var originalOpacity = $('#myDiv').getAlpha(); 

//set new opacity 
//it will be 0 at the top of the page 
var newOpacity = $(window).scrollTop()/500; 
$('#myDiv').setAlpha({"alpha": newOpacity, "max": originalOpacity}); 

//on scroll fade new opacity to originalOpacity at 500px down 
$(window).scroll(function() { 
    var newOpacity = $(window).scrollTop()/500; 
    $('#myDiv').setAlpha({"alpha": newOpacity, "max": originalOpacity}); 
}

出典

2014-06-27 16:10:35 Jonathon

Javascriptではどのようにrgbを指定せずにrgbaを設定できますか？

答えて

関連する問題