En Javascript, ¿cómo puedo configurar rgba sin especificar el rgb?

que tienen un elemento HTML cuyo color de fondo se ajusta con RGBA()En Javascript, ¿cómo puedo configurar rgba sin especificar el rgb?

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

Entonces tengo un temporizador que hace que el fondo poco a poco se desvanecen en cambiando el valor de opacidad del elemento en javascript

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

¿Hay alguna manera de establecer el valor a de rgba() sin cambiar/conocer los valores de rgb?

Tal vez puedo hacer algo como esto?

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

Fuente

2011-11-18 Jake M

Dependiendo de su situación, la opacidad puede funcionar para usted. Sin embargo, se desvanecería todo el elemento, no solo el fondo, así que supongo que probablemente no sea una opción. – qw3n

Después de algún jugando, y el descubrimiento de getComputedStyle, he preparado esta.

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

Asegúrese de que usted define en el CSS de sus valores, y en cascada porque RGBA es CSS3.
También vea que puede pasar un número> 1 para alfa y se dividirá por 100 para usted (odio trabajar con decimales cuando pienso en porcentajes).
¡Disfrútalo!

Fuente

2011-11-18 07:52:13

He editado su código para corregir sus deficiencias más obvias. Algunas pruebas de características todavía faltan. Tenga en cuenta que esto podría ser incluso más simple ya que no nos importa el formato de los valores RGB originales, y no el posible valor después del componente azul RGB. También tenga en cuenta que la división siempre conlleva la posibilidad de un error de redondeo, y debe evitarse. – PointedEars

Por alguna razón mi edición no fue aceptada. JFTR, hay varias cosas mal con el código original: basándonos en el aumento de prototipo de elemento, variables no declaradas, faltando document.defaultView, faltando el segundo argumento getComputedStyle(), /.../g.exec(s) en lugar de s.match (/ ... /), referencia de elemento repetida en lugar de slice, número insuficiente y coincidencia de porcentaje faltante (si uno quiere adherirse a CSS 2.1/3) y una asignación innecesaria. – PointedEars

¿Le sirve de ayuda?

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

Esto puede ayudar en la adición.

Convert RGBA color to RGB

Fuente

2011-11-18 05:00:25 r0ast3d

Usted tiene la cadena, lo reemplaza
'rgba(1,1,1,0.3)'.replace(/[^,]+(?=\))/, '0.5')

Fuente

2011-11-18 08:19:30 Leonid

LOVE IT! regex rocks :) – rikpg

También es posible usar elem.style.opacity=0.5 o en html style="opacity:0.5". Es importante tener en cuenta que los nodos secundarios también se desvanecerán.

Fuente

2011-11-18 08:24:11 rekire

¿Por qué se votó negativamente? – Peter

+11

La opacidad no es lo mismo que la opacidad de fondo a través del canal alfa. Esto no es lo que la pregunta está pidiendo. La opacidad reducirá la opacidad del fondo Y el contenido del div mientras que la pregunta quiere una forma de hacerlo solo para el fondo. – Frug

Tuve que hacer esto también, pero terminé escribiendo algo un poco más específico. Lo puse en un plugin de jQuery que acepta un minuto y opacidad max:

$.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; 
    } 
}

entonces ellos utilizan para hacer algo como esto para establecer un div a transparente y desaparecer a su opacidad original como se desplaza hacia abajo:

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

Fuente

2014-06-27 16:10:35 Jonathon

En Javascript, ¿cómo puedo configurar rgba sin especificar el rgb?

Respuesta

Cuestiones relacionadas