JavaScript वैरिएबल के लिए पृष्ठभूमि रंग हेक्स

वोट
35

मैं जावास्क्रिप्ट और jQuery के लिए नए की तरह कर रहा हूँ और अब मैं एक समस्या का सामना करना पड़ रहा हूँ:

मैं PHP के लिए कुछ डेटा पोस्ट करने के लिए की जरूरत है और एक डाटा बिट div एक्स की पृष्ठभूमि का रंग हेक्स होने की जरूरत है

jQuery सीएसएस ( पृष्ठभूमि रंग) होता है और इसका साथ मैं JavaScript वैरिएबल में पृष्ठभूमि के आरजीबी मूल्य मिल सकता है।

सीएसएस समारोह इस rgb (0, 70, 255) इस तरह की स्ट्रिंग वापस जाने के लिए लगता है।

मैं पृष्ठभूमि रंग (भले ही यह सीएसएस में हेक्स के रूप में स्थापित है) के हेक्स प्राप्त करने के लिए किसी भी तरह से नहीं मिल सका।

तो ऐसा लगता है जैसे मैं इसे बदलना होगा। मैं हेक्स के लिए आरजीबी परिवर्तित करने के लिए एक समारोह मिला, लेकिन यह तीन अलग-अलग चर, आर, जी और बी के साथ बुलाया जाना चाहिए। तो मैं स्ट्रिंग आरजीबी पार्स करने के लिए की आवश्यकता होगी (एक्स, एक्स एक्स, xxx) वर आर में = एक्स; वर जी = xx; वर ख = xxx; किसी न किसी तरह।

मैं जावास्क्रिप्ट के साथ तार को पार्स गूगल की कोशिश की, लेकिन मैं वास्तव में समझ में नहीं आया नियमित अभिव्यक्ति बात।

वहाँ एक रास्ता हेक्स के रूप में div की पृष्ठभूमि रंग प्राप्त करने के लिए है, या स्ट्रिंग 3 अलग चर में परिवर्तित किया जा सकता है?

12/03/2009 को 15:44
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


10 जवाब

वोट
62

इस आजमा कर देखें:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

नीचे टिप्पणी में प्रश्न के उत्तर में:

मैं दोनों rgb और RGBA निर्भर करता है जो एक मैं संभाल करने के लिए regex संशोधित करने के लिए कोशिश कर रहा हूँ। किसी भी संकेत? धन्यवाद।

मैं बिल्कुल यकीन है कि अगर यह इस सवाल के संदर्भ में समझ में आता है (जब से तुम हेक्स में एक RGBA रंग का प्रतिनिधित्व नहीं कर सकते हैं) नहीं कर रहा हूँ, लेकिन मुझे लगता है कि वहाँ अन्य उपयोगों हो सकता है। वैसे भी, आप रेगुलर एक्सप्रेशन से बदल इस तरह हो सकती है:

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/

उदाहरण आउटपुट:

var d = document.createElement('div');
d.style.backgroundColor = 'rgba( 255,  60, 50, 0)';

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]
12/03/2009 को 15:58
का स्रोत उपयोगकर्ता

वोट
10

आप jQuery उपलब्ध है, तो इस सुपर कॉम्पैक्ट संस्करण है कि मैं सिर्फ के साथ आया है।

वर RGBtoHEX = समारोह (रंग) {
  वापसी "#" + $। नक्शा (color.match (/ \ बी (\ d +) \ b / g), समारोह (अंक) {
    वापसी ( '0' + parseInt (अंक) .toString (16))। टुकड़ा (-2)
  ।}) में शामिल होने के ( '');
};
22/04/2011 को 20:49
का स्रोत उपयोगकर्ता

वोट
8

आप इस जैसे rgb भी, का उपयोग कर एक सीएसएस रंग सेट कर सकते हैं:

background-color: rgb(0, 70, 255);

यह है मान्य सीएसएस , चिंता मत करो।


संपादित करें: देखें nickf जवाब एक अच्छा तरीका यह कन्वर्ट करने के लिए करता है, तो आप पूरी तरह करने की जरूरत के लिए।

12/03/2009 को 15:53
का स्रोत उपयोगकर्ता

वोट
5

मैं एक समारोह थोड़ी देर वापस (पाया R0bb13 द्वारा )। यह regex नहीं है, इसलिए मैं इसे ठीक से काम करने के लिए nickf से उधार लेना पड़ा। मैं केवल यह पोस्टिंग कर रहा हूँ, क्योंकि यह एक दिलचस्प विधि का उपयोग नहीं करता एक अगर बयान या एक पाश आप एक परिणाम देने के लिए है। इसके अलावा इस स्क्रिप्ट एक # के साथ हेक्स मान देता है (यह द्वारा की जरूरत थी Farbtastic प्लगइन मैं समय पर उपयोग कर रहा था)

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff

नोट: nickf की पटकथा से हेक्स परिणाम 0046ff और नहीं 0070ff, लेकिन कोई बड़ी बात नहीं होना चाहिए: पी

अद्यतन, एक और बेहतर वैकल्पिक पद्धति:

function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return ("0" + parseInt(x).toString(16)).slice(-2);
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
29/07/2009 को 03:32
का स्रोत उपयोगकर्ता

वोट
3

JQuery के साथ ..

var cssColorToHex = function(colorStr){
    var hex = '#';
    $.each(colorStr.substring(4).split(','), function(i, str){
        var h = ($.trim(str.replace(')',''))*1).toString(16);
        hex += (h.length == 1) ? "0" + h : h;
    });
    return hex;
};
16/11/2010 को 15:25
का स्रोत उपयोगकर्ता

वोट
1

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

ऐसा JavaScript वर्ग कि एक स्ट्रिंग स्वीकार करता है और इसे से बाहर एक वैध रंग यह पता लगाने की कोशिश करता है। कुछ स्वीकार कर लिया आदानों उदाहरण के लिए कर रहे हैं:

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
20/04/2011 को 08:54
का स्रोत उपयोगकर्ता

वोट
1

कैसे इस समाधान के बारे में, समारोह stringRGB2HEX इनपुट स्ट्रिंग जहां प्रारूप में रंग के सभी occurencies "rgb (आर, जी, बी)" हेक्स प्रारूप "#rrggbb" ने ले ली है की एक प्रति देता है।

   //function for private usage of the function below
   //(declaring this one in global scope should make it faster rather than 
   //declaraing it as temporary function inside stringRGB2HEX that need to be
   //instantieted at every call of stringRGB2HEX
   function _rgb2hex(rgb_string, r, g, b) 
   {
      //VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0'
      var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: ( r + (256 * g) + (65536 * b) + 16777216)
      //toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx]   
      return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above
   }

   function stringRGB2HEX(string)
   {
      if(typeof string === 'string')
         string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex);
      return string;
   }

यह एक तरह जटिल शैलियों में भी आरजीबी रंग बदल देता है background

एक style.backgroundमूल्य की तरह: "none no-repeat scroll rgb(0, 0, 0)"आसानी से में बदल जाता है "none no-repeat scroll #000000"बस करकेstringRGB2HEX(style.background)

19/08/2010 को 16:06
का स्रोत उपयोगकर्ता

वोट
1

ये समाधान, क्रोम में असफल हो जायेगी क्योंकि यह एक RGBA (एक्स, एक्स, एक्स, एक्स) के लिए पृष्ठभूमि रंग देता है।

संपादित करें: यह जरूरी सच नहीं है। क्रोम अभी भी () स्थापित करेगा rgb का उपयोग कर पृष्ठभूमि, तुम क्या कर रहे हैं पर निर्भर करता। सबसे अधिक संभावना के रूप में लंबे कोई अल्फ़ा चैनल लागू किया गया के रूप में, क्रोम के बजाय rgb RGBA साथ जवाब देंगे।

22/05/2010 को 19:35
का स्रोत उपयोगकर्ता

वोट
0

यहां आपको यह आप $ (चयनकर्ता) .getHexBackgroundColor () का उपयोग करने के हेक्स मान आसानी से वापस जाने के लिए अनुमति देगा:

$.fn.getHexBackgroundColor = function() {
    var rgb = $(this).css('background-color');
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
09/08/2011 को 05:23
का स्रोत उपयोगकर्ता

वोट
0

मैं इस समाधान पाया http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx और मैं अपने प्रोजेक्ट में यह उपयोग कर रहा हूँ

11/01/2010 को 15:38
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more