在 Javascript 中，如何在不指定 rgb 的情况下设置 rgba？答案

【问题标题】：In Javascript how can I set rgba without specifying the rgb?在 Javascript 中，如何在不指定 rgb 的情况下设置 rgba？
【发布时间】：2011-12-31 22:53:44
【问题描述】：

我有一个使用 rgba() 设置背景颜色的 HTML 元素

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

然后我有一个计时器，通过在javascript中更改元素的不透明度值，使背景慢慢淡入

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

有没有办法在不改变/知道 rgb 值的情况下设置 rgba() 的 a 值？

也许我可以做这样的事情？

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

【问题讨论】：

根据您的情况，不透明度可能对您有用。但是它会褪色整个元素而不仅仅是背景，所以我假设它可能不是一个选项。

标签： javascript html css

【解决方案1】：

你得到了字符串，替换任何内容
'rgba(1,1,1,0.3)'.replace(/[^,]+(?=\))/, '0.5')

【讨论】：

爱它！正则表达式岩石:)

【解决方案2】：

玩了一圈，发现getComputedStyle，我整理了这个。

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

确保在您的 css 中定义您的值并级联，因为 RGBA 是 CSS3。
另请注意，您可以为 alpha 传递一个 >1 的数字，它会为您除以 100（我讨厌在考虑百分比时使用小数）。
享受吧！

【讨论】：

我已编辑您的代码以修复其更明显的缺点。仍然缺少一些功能测试。请注意，这可能更简单，因为我们并不真正关心原始 RGB 值的格式，也不关心蓝色 RGB 分量之后的可能值。另请注意，除法总是带有舍入误差的可能性，应该避免。
由于某种原因，我的编辑未被接受。 JFTR，原始代码有几个问题：依赖元素原型扩充、未声明的变量、缺少 document.defaultView、缺少第二个 getComputedStyle() 参数、/.../g.exec(s) 而不是 s.match(/... /)，重复元素引用而不是切片，数量不足和缺少百分比匹配（如果要遵守 CSS 2.1 / 3），以及一项不必要的分配。

【解决方案3】：

您也可以使用elem.style.opacity=0.5 或在html 中使用style="opacity:0.5"。需要注意的是，子节点也会褪色。

【讨论】：

不透明度与通过 Alpha 通道的背景不透明度不同。这不是问题所要求的。不透明度会降低背景的不透明度和 div 的内容，而问题想要一种单独为背景做的方法。

【解决方案4】：

我也这样做了，但最后写了一些更具体的东西。我把它放在一个接受最小和最大不透明度的 jQuery 插件中：

$.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 设置为透明并在您向下滚动时将其淡化为原始不透明度：

//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});
}

【讨论】：

OP 没有使用 jQuery！

【解决方案5】：

这有帮助吗？

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

这可能会有所帮助。

Convert RGBA color to RGB

【讨论】：