Шестнадцатеричное число цвета фона к переменной JavaScript

Я довольно плохо знаком с JavaScript и jQuery, и теперь я сталкиваюсь с проблемой:

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

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

Функция CSS, кажется, возвращает строку как этот rgb (0, 70, 255).

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

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

Я попробовал к Google, анализирующему строки с JavaScript, но я действительно не понял вещь регулярных выражений.

Существует ли способ получить цвет фона отделения как шестнадцатеричное число, или строка может быть преобразована в 3 различных переменные?

36
задан Blazemonger 13 December 2013 в 19:31
поделиться

3 ответа

испытайте это:

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"

В ответ на вопрос в комментариях ниже:

я пытаюсь изменить regex для обработки и rgb и rgba, зависящего, какой я получаю. Какие-либо подсказки? Спасибо.

я не абсолютно уверен, если это имеет смысл в контексте этого вопроса (так как Вы не можете представить rgba, раскрашивают шестнадцатеричное число), но я предполагаю, что могло быть другое использование. Так или иначе Вы могли изменить regex, чтобы быть похожими на это:

/^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"]
62
ответ дан ehird 27 November 2019 в 05:28
поделиться

Можно выбрать цвет CSS, использующий rgb также, такой как это:

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

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

<час>

Редактирование: Видят ответ nickf для хорошего способа преобразовать его, если Вы абсолютно должны.

8
ответ дан Community 27 November 2019 в 05:28
поделиться

Некоторое время назад я нашел другую функцию ( от 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

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

Update, еще один лучший альтернативный метод:

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
ответ дан 27 November 2019 в 05:28
поделиться
Другие вопросы по тегам:

Похожие вопросы: