Background-color hex zu JavaScript-Variable

Question

Ich bin ein bisschen neu in JavaScript und jQuery und jetzt ein Problem, das ich bin vor:

Ich brauche ein paar Daten zu PHP und ein Bit der Daten schreiben muss die Hintergrundfarbe hex von div X sein.

jQuery hat die CSS ( "background-color") Funktion und damit kann ich RGB-Wert des Hintergrunds in ein JavaScript-Variable erhalten.

Die CSS-Funktion scheint eine Zeichenfolge wie diese rgb zurückzukehren (0, 70, 255).

ich keine Möglichkeit, hex die Hintergrund-Farbe finden konnte zu bekommen (auch wenn es als Hex in CSS festgelegt wird).

So scheint es, wie ich brauche es zu konvertieren. Ich fand eine Funktion für RGB zu Hex-Konvertierung, aber es muss mit drei verschiedenen Variablen, r, g und b genannt werden. Also brauche ich den String rgb (x, xx, xxx) in var r = x zu analysieren; var g = xx; var b = xxx; irgendwie.

Ich habe versucht, Strings mit JavaScript Google Parsen, aber ich habe nicht wirklich verstehen, die reguläre Ausdrücke Sache.

Gibt es eine Möglichkeit, die Hintergrundfarbe von div als Hex zu bekommen, oder kann die Zeichenfolge in 3 verschiedene Variablen umgewandelt werden?

Answer 1

try this out:

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"

Als Antwort auf die Frage in den Kommentaren unten:

  

Ich versuche, die Regex zu modifizieren RGB- und RGBA zu behandeln, je welche ich bekommen. Irgendwelche Hinweise? Vielen Dank.

Ich bin mir nicht ganz sicher, ob es sinnvoll, im Rahmen dieser Frage macht (da Sie keine rgba Farbe in Hex darstellen können), aber ich denke, es gibt andere Anwendungen sein könnte. Wie auch immer, man kann den Regex ändert so sein:

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

Beispiel Ausgabe:

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"]

Answer 2

Wenn Sie jQuery zur Verfügung haben, das ist die superkompakte Version, die ich kam gerade mit.

var RGBtoHEX = function(color) {
  return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){
    return ('0' + parseInt(digit).toString(16)).slice(-2)
  }).join('');
};

Answer 3

Sie können eine CSS Farbe gesetzt rgb auch, wie folgt aus:

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

Es ist gültige CSS , keine Sorge.

---

Edit: finden Sie unter Nickf beantworten für eine schöne Art und Weise zu konvertieren, wenn Sie unbedingt müssen.

Answer 4

fand ich eine andere Funktion eine Weile zurück ( durch R0bb13 ). Es muss nicht die Regex, so hatte ich es von Nickf zu leihen, um es richtig zu arbeiten. Ich poste es nur, weil es eine interessante Methode ist, die nicht ein if-Anweisung oder eine Schleife Ihnen nicht verwenden, um ein Ergebnis zu geben. Auch dieses Skript gibt den Hex-Wert mit einem # (es benötigt wurde von der Farbtastic Plugin Ich war mit an die Zeit)

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

Hinweis: Das Hex-Ergebnis von Nickf Skript sollte 0046ff und nicht 0070ff, aber keine große Sache sein: P

Update, eine weitere besser alternative Methode:

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

Answer 5

Mit 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;
};

Answer 6

Diese Lösungen werden in Chrome scheitern, da sie ein rgba zurückgibt (x, x, x, x) für die Hintergrundfarbe.

EDIT: Dies ist nicht unbedingt wahr. Chrome wird immer noch Hintergründe gesetzt rgb () verwenden, je nachdem, was Sie tun. Höchstwahrscheinlich, solange es kein Alphakanal angewendet wird, wird Chrome mit rgb reagieren statt rgba.

Answer 7

Wie über diese Lösung, Funktion stringRGB2HEX gibt eine Kopie der Eingabezeichenfolge, in der alle occurencies von Farben im Format "rgb (r, g, b)" werden von dem Hex-Format ersetzt worden " #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;
   }

Dieses wandelt auch RGB-Farben in komplexen Stile wie background.

Ein style.background Wert wie: "none no-repeat scroll rgb(0, 0, 0)" leicht in "none no-repeat scroll #000000" umgewandelt, indem einfach stringRGB2HEX(style.background) tun

Answer 8

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

Eine JavaScript-Klasse, die eine Zeichenfolge akzeptiert und versucht, eine gültige Farbe aus, um es herauszufinden. Einige akzeptiert Eingänge sind zum Beispiel:

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue

Answer 9

ich diese Lösung gefunden http: // Haacked .com / Archiv / 2009/12/29 / convert-rgb-to-hex.aspx und ich es in meinem Projekt bin mit

Answer 10

Hier gehen Sie, dies ermöglicht es Ihnen $ (Selektor) .getHexBackgroundColor () verwenden, um den Hex-Wert zurückzukehren leicht:

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