В Javascript, как я могу установить rgba без указания rgb?

У меня есть элемент HTML, цвет фона которого задан с помощью rgba()

<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

Есть ли способ установить значение rgba() без изменения/зная значения rgb?

Может быть, я могу сделать что-то вроде этого?

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

Ответы

Ответ 1

После некоторых игр и открытия 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.
  • Также см., что вы можете передать число > 1 для альфы, и оно разделится на 100 для вас (я ненавижу работать с десятичными знаками при мышлении процентов).
  • Наслаждайтесь!

Ответ 2

У вас есть строка, замените все, что угодно 'rgba(1,1,1,0.3)'.replace(/[^,]+(?=\))/, '0.5')

Ответ 3

Вы также можете использовать elem.style.opacity=0.5 или в html style="opacity:0.5". Важно отметить, что дочерние узлы тоже будут исчезать.

Ответ 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});
}