Trong Javascript làm thế nào tôi có thể thiết lập rgba mà không chỉ định rgb?

Tôi có một phần tử HTML có màu nền được thiết lập với rgba()Trong Javascript làm thế nào tôi có thể thiết lập rgba mà không chỉ định rgb?

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

Sau đó, tôi có một bộ đếm thời gian mà làm cho nền từ từ mờ dần trong bằng cách thay đổi giá trị Opacity của nguyên tố này trong javascript

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

Có cách nào để đặt giá trị của rgba() mà không thay đổi/biết giá trị rgb không?

Có lẽ tôi có thể làm điều gì đó như thế này?

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

Nguồn

2011-11-18 Jake M

Tùy thuộc vào độ mờ của tình huống của bạn có thể phù hợp với bạn. Tuy nhiên nó sẽ làm mờ toàn bộ phần tử không chỉ nền, vì vậy tôi cho rằng nó có lẽ không phải là một lựa chọn. – qw3n

Sau khi một số chơi xung quanh, và phát hiện ra getComputedStyle, tôi đã đặt lại với nhau này.

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

Hãy chắc chắn rằng bạn xác định trong css của bạn giá trị của bạn, và thác vì RGBA là CSS3.
Cũng thấy rằng bạn có thể chuyển một số> 1 cho alpha và nó sẽ chia cho 100 cho bạn (tôi ghét làm việc với số thập phân khi suy nghĩ tỷ lệ phần trăm).
Tận hưởng!

Nguồn

2011-11-18 07:52:13

Tôi đã chỉnh sửa mã của bạn để khắc phục những thiếu sót rõ ràng hơn. Một số thử nghiệm tính năng vẫn bị thiếu. Lưu ý rằng điều này thậm chí có thể đơn giản hơn vì chúng tôi không thực sự quan tâm đến định dạng của các giá trị RGB ban đầu và không cho giá trị có thể có sau thành phần RGB màu xanh lam. Cũng lưu ý rằng bộ phận luôn mang theo nó khả năng xảy ra lỗi làm tròn, và nên tránh. – PointedEars

Vì lý do nào đó, chỉnh sửa của tôi không được chấp nhận. JFTR, có một vài điều sai với mã ban đầu: Dựa vào tăng thêm nguyên mẫu nguyên mẫu, biến không khai báo, thiếu document.defaultView, thiếu tham số getComputedStyle() thứ hai, /…/g.exec(s) thay vì s.match (/… /), tham chiếu phần tử lặp lại thay vì slice, số không đủ và phần trăm phần trăm bị thiếu (nếu bạn muốn tuân thủ CSS 2.1/3) và một nhiệm vụ không cần thiết. – PointedEars

Điều này có hữu ích không?

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

Điều này có thể giúp ích.

Convert RGBA color to RGB

Nguồn

2011-11-18 05:00:25 r0ast3d

Bạn có chuỗi, thay thế bất cứ điều gì
'rgba(1,1,1,0.3)'.replace(/[^,]+(?=\))/, '0.5')

Nguồn

2011-11-18 08:19:30 Leonid

TÌNH YÊU NÓ! regex rocks :) – rikpg

Bạn cũng có thể sử dụng elem.style.opacity=0.5 hoặc trong html style="opacity:0.5". Điều quan trọng cần lưu ý là các nút con cũng sẽ mờ đi.

Nguồn

2011-11-18 08:24:11 rekire

Tại sao điều này lại bị bỏ phiếu? – Peter

+11

Độ mờ không giống với độ mờ nền thông qua kênh alpha. Đây không phải là câu hỏi được đặt ra. Độ mờ sẽ làm giảm độ mờ đục của nền và nội dung của div trong khi câu hỏi muốn có cách để làm điều đó cho nền một mình. – Frug

Tôi cũng đã làm điều này nhưng cuối cùng lại viết một cái gì đó cụ thể hơn một chút. Tôi đặt nó trong một plugin jQuery mà chấp nhận một phút và độ mờ đục tối đa:

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

sau đó bạn sử dụng chúng để làm một cái gì đó như thế này để thiết lập một div để minh bạch và mờ dần nó để opacity ban đầu của nó khi bạn di chuyển xuống:

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

Nguồn

2014-06-27 16:10:35 Jonathon

Trong Javascript làm thế nào tôi có thể thiết lập rgba mà không chỉ định rgb?

Trả lời

Các vấn đề liên quan