जावास्क्रिप्ट में मैं आरजीबी निर्दिष्ट किए बिना आरजीबीए कैसे सेट कर सकता हूं?

मैं एक HTML तत्व जिसका पृष्ठभूमि रंग RGBA() के साथ सेट कर दिया जाता हैजावास्क्रिप्ट में मैं आरजीबी निर्दिष्ट किए बिना आरजीबीए कैसे सेट कर सकता हूं?

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

फिर

मेरे पास है एक टाइमर है कि पृष्ठभूमि धीरे तत्व की अस्पष्टता मान बदलकर में फीका जावास्क्रिप्ट में

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

क्या 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

कुछ चारों ओर खेल, और 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>

करें कि आप अपने मूल्यों अपने सीएसएस में परिभाषित करते हैं, और झरना क्योंकि RGBA CSS3 है।
यह भी देखें कि आप अल्फा के लिए नंबर 1 में पास कर सकते हैं और यह आपके लिए 100 से विभाजित होगा (मुझे प्रतिशत सोचते समय decimals के साथ काम करने से नफरत है)।
आनंद लें!

स्रोत

2011-11-18 07:52:13

मैंने अपनी कोड को और अधिक स्पष्ट कमियों को ठीक करने के लिए संपादित किया है। कुछ फीचर परीक्षण अभी भी गायब हैं। ध्यान दें कि यह भी आसान हो सकता है क्योंकि हम वास्तव में मूल आरजीबी मूल्यों के प्रारूप की परवाह नहीं करते हैं, न कि नीले आरजीबी घटक के बाद संभावित मूल्य के लिए। यह भी ध्यान रखें कि विभाजन हमेशा इसके साथ एक गोल त्रुटि की संभावना रखता है, और इससे बचा जाना चाहिए। – PointedEars

किसी कारण से मेरा संपादन स्वीकार नहीं किया गया था। जेएफटीआर, मूल कोड के साथ कई चीजें गलत हैं: तत्व प्रोटोटाइप संवर्द्धन, अविकसित चर, गायब दस्तावेज़ .defaultView पर निर्भर करते हुए, s.match (/ ... के बजाय दूसरा getComputedStyle() तर्क, /.../g.exec(s) अनुपलब्ध है। /), स्लाइस, अपर्याप्त संख्या और अनुपलब्ध प्रतिशत मिलान के बजाय दोहराए गए तत्व संदर्भ (यदि कोई सीएसएस 2 का पालन करना चाहता है।1/3), और एक अनावश्यक असाइनमेंट। – PointedEars

क्या इससे मदद मिलती है?

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

यह अलावा मदद मिल सकती है।

Convert RGBA color to RGB

स्रोत

2011-11-18 05:00:25 r0ast3d

आप स्ट्रिंग, की जगह जो कुछ
'rgba(1,1,1,0.3)'.replace(/[^,]+(?=\))/, '0.5')

स्रोत

2011-11-18 08:19:30 Leonid

इसे प्यार करो! रेगेक्स चट्टानें :) – rikpg

तुम भी elem.style.opacity=0.5 या html style="opacity:0.5" में इस्तेमाल कर सकते हैं मिल गया। यह ध्यान रखना महत्वपूर्ण है कि बच्चे नोड भी फीका होगा।

स्रोत

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

जावास्क्रिप्ट में मैं आरजीबी निर्दिष्ट किए बिना आरजीबीए कैसे सेट कर सकता हूं?

उत्तर

संबंधित मुद्दे