Переменная цвета фона в JavaScript - PullRequest
Новая
       53

Переменная цвета фона в JavaScript

36 голосов
/ 12 марта 2009

Я новичок в JavaScript и jQuery, и теперь я столкнулся с проблемой:

Мне нужно отправить некоторые данные в PHP, и один бит данных должен быть шестнадцатеричным цветом фона div X.

jQuery имеет функцию css ("background-color"), и с ее помощью я могу получить значение RGB фона в переменную JavaScript.

Кажется, функция CSS возвращает строку, подобную этой rgb (0, 70, 255).

Я не смог найти какой-либо способ получить шестнадцатеричный цвет фона (хотя в CSS он задан как шестнадцатеричный).

Так что, похоже, мне нужно конвертировать. Я нашел функцию для преобразования RGB в hex, но ее нужно вызывать с тремя различными переменными, r, g и b. Поэтому мне нужно разобрать строку rgb (x, xx, xxx) в var r = x; var g = xx; var b = xxx; как-то.

Я пытался гуглить парсинг строк с помощью JavaScript, но я не совсем понял, что такое регулярные выражения.

Есть ли способ получить цвет фона div в шестнадцатеричном формате или строку можно преобразовать в 3 разные переменные?

Ответы [ 10 ]

62 голосов
/ 12 марта 2009

попробуйте это: 

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, в зависимости от того, какое из них я получу. Есть намеки? Благодарю.

Я не совсем уверен, имеет ли это смысл в контексте этого вопроса (поскольку вы не можете представить цвет 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"]
10 голосов
/ 22 апреля 2011

Если у вас есть jQuery, это суперкомпактная версия, которую я только что придумал. 

var RGBtoHEX = function(color) {
  return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){
    return ('0' + parseInt(digit).toString(16)).slice(-2)
  }).join('');
};
8 голосов
/ 12 марта 2009

Вы также можете установить цвет CSS, используя rgb, например: 

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

Это действительный CSS , не волнуйтесь.

Редактировать: См. Ответ nickf , где показан хороший способ конвертировать его, если вам абсолютно необходимо.

5 голосов
/ 29 июля 2009

Некоторое время назад я обнаружил другую функцию ( от R0bb13 ). В нем нет регулярного выражения, поэтому мне пришлось позаимствовать его у nickf, чтобы он работал правильно. Я публикую его только потому, что это интересный метод, который не использует оператор if или цикл для получения результата. Также этот скрипт возвращает шестнадцатеричное значение с символом # (оно было необходимо для плагина 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

Примечание: шестнадцатеричный результат скрипта Никфа должен быть 0046ff, а не 0070ff, но ничего страшного: P

Обновление, другой лучше альтернативный метод: 

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]);
}
3 голосов
/ 16 ноября 2010

с 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;
};
1 голос
/ 20 апреля 2011

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

Класс JavaScript, который принимает строку и пытается определить из нее допустимый цвет. Некоторые принятые входные данные, например: 

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
1 голос
/ 19 августа 2010

Как насчет этого решения, функция stringRGB2HEX возвращает копию входной строки, где все вхождения цветов в формате "rgb (r, g, b)" были заменены шестнадцатеричным форматом "# 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;
   }

Этот также преобразует цвета RGB в сложные стили, такие как background.

A style.background значение типа: "none no-repeat scroll rgb(0, 0, 0)" легко конвертируется в "none no-repeat scroll #000000", просто выполняя stringRGB2HEX(style.background)

1 голос
/ 22 мая 2010

Эти решения потерпят неудачу в Chrome, поскольку он возвращает rgba (x, x, x, x) для цвета фона.

РЕДАКТИРОВАТЬ: Это не обязательно так. Chrome по-прежнему устанавливает фон с помощью rgb (), в зависимости от того, что вы делаете. Скорее всего, если не используется альфа-канал, Chrome ответит с помощью rgb вместо rgba.

0 голосов
/ 09 августа 2011

Здесь вы можете использовать $ (селектор) .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]);
}
0 голосов
/ 11 января 2010

Я нашел это решение http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx и использую его в своем проекте

...