wake-up-neo.com

Hintergrundfarbe für die JavaScript-Variable

Ich bin etwas neu in JavaScript und jQuery und jetzt habe ich ein Problem:

Ich muss einige Daten an PHP posten, und ein Bit der Daten muss die Hintergrundfarbe hex von div X sein.

jQuery hat die Funktion css ("background-color") und damit kann ich den RGB-Wert des Hintergrunds in eine JavaScript-Variable bringen.

Die CSS-Funktion scheint einen String wie diesen rgb (0, 70, 255) zurückzugeben. 

Ich konnte keine Möglichkeit finden, ein Hex der Hintergrundfarbe zu erhalten (obwohl es in CSS als Hex gesetzt ist).

Es scheint also, als müsste ich es konvertieren. Ich habe eine Funktion zum Konvertieren von RGB in Hex gefunden, aber es muss mit drei verschiedenen Variablen, r, g und b, aufgerufen werden. Ich würde also den String rgb (x, xx, xxx) in var r = x parsen müssen; var g = xx; var b = xxx; irgendwie. 

Ich habe versucht, Strings mit JavaScript zu analysieren, aber ich konnte die regulären Ausdrücke nicht wirklich verstehen. 

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

36
Removed_account

probiere das aus:

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 folgenden Kommentaren:

Ich versuche, den Regex so zu ändern, dass er sowohl mit rgb als auch mit rgba umgehen kann, abhängig davon, welche ich bekomme. Irgendwelche Hinweise? Vielen Dank. 

Ich bin mir nicht ganz sicher, ob es im Zusammenhang mit dieser Frage sinnvoll ist (da Sie keine rgba-Farbe in Hex darstellen können), aber ich denke, es könnte andere Zwecke geben. Wie auch immer, Sie könnten die Regex so ändern, dass sie folgendermaßen aussieht:

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

Beispielausgabe:

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

Wenn Sie jQuery zur Verfügung haben, ist dies die superkompakte Version, die ich gerade entwickelt habe.

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

Sie können eine CSS-Farbe auch mithilfe von rgb festlegen, beispielsweise:

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

Es ist gültiges CSS , keine Sorge.


Edit: Siehe nickf answer für eine schöne Möglichkeit, es zu konvertieren, wenn Sie es unbedingt brauchen.

8
lpfavreau

Ich habe vor einiger Zeit eine andere Funktion gefunden ( von R0bb13 ). Es hat nicht die Regex, also musste ich es von Nickf leihen, damit es richtig funktioniert. Ich poste es nur, weil es eine interessante Methode ist, die keine if-Anweisung oder Schleife verwendet, um ein Ergebnis zu erhalten. Auch dieses Skript liefert den Hex-Wert mit einem # (Es wurde von dem Farbtastic -Plugin benötigt, das ich damals verwendete.

//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 Nickfs Skript sollte 0046ff und nicht 0070ff sein, aber keine große Sache: P

Update, eine andere better 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]);
}
5
Mottie

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;
};
3
Mark Rhodes

Diese Lösungen schlagen in Chrome fehl, da sie eine Hintergrundfarbe (x, x, x, x) zurückgeben.

EDIT: Das ist nicht unbedingt wahr. Chrome setzt immer noch Hintergründe mit rgb (), je nachdem, was Sie tun. Wenn kein Alphakanal verwendet wird, antwortet Chrome höchstwahrscheinlich mit rgb anstelle von rgba.

1
Kevin.Riggen

Wie wäre es mit dieser Lösung: function stringRGB2HEX gibt eine Kopie der Eingabezeichenfolge zurück, wobei alle Vorkommen von Farben im Format "rgb (r, g, b)" durch das Hex-Format "#rrggbb" ersetzt wurden.

   //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 konvertiert auch RGB-Farben in komplexe Stile wie background.

Ein style.background-Wert wie: "none no-repeat scroll rgb(0, 0, 0)" kann leicht in "none no-repeat scroll #000000" konvertiert werden, indem einfach stringRGB2HEX(style.background) ausgeführt wird.

1
Marco Demaio

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

Eine JavaScript-Klasse, die eine Zeichenfolge akzeptiert und versucht, daraus eine gültige Farbe herauszufinden. Einige akzeptierte Eingaben sind zum Beispiel:

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

Ich fand diese Lösung http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx und verwende sie in meinem Projekt

0
Amr Elgarhy

Hier können Sie den $ -Wert mit $ (Selector) .getHexBackgroundColor () einfach zurückgeben:

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