Jakie byłoby najprostszym sposobem przekształcićJak wyodrębnić r, g, b, wartości z koloru CSS?
$('#my_element').css('backgroundColor')
sprzeciwić tak:
{ r: red_value, g: green_value, b: blue_value, a: alpha_value }
?
Jakie byłoby najprostszym sposobem przekształcićJak wyodrębnić r, g, b, wartości z koloru CSS?
$('#my_element').css('backgroundColor')
sprzeciwić tak:
{ r: red_value, g: green_value, b: blue_value, a: alpha_value }
?
var c = $('body').css('background-color');
var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
for(var i in rgb) {
console.log(rgb[i]);
}
Spróbuj tutaj http://jsbin.com/uhawa4
Edycja:
var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');
for(var i in rgb) {
console.log(rgb[i]);
}
lub nawet prostszy sposób, tylko dążenie do numerów
var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);
for(var i in rgb) {
console.log(rgb[i]);
}
Dzięki! Jest to bardzo zbliżone do tego, czego szukałem :) –
Zastąp 'var rgb = c.match (/ \ d +/g);' z 'var rgb = c.match (/ [.? \ D] +/g) ; 'w celu poprawnego dopasowania liczb zmiennoprzecinkowych dla alfa w ciągach rgba, takich jak' rgba (60,4,2,0.3) ' –
Powiedzmy, że masz następującą regułę CSS:
#my_element {
background-color: rgba(100, 0, 255, 0.5);
}
Wtedy to w jaki sposób można uzyskać obiekt RBGA:
var colorStr = $('#my_element').css('backgroundColor'); // "rgba(100, 0, 255, 0.5)"
// using string methods
colorStr = colorStr.slice(colorStr.indexOf('(') + 1, colorStr.indexOf(')')); // "100, 0, 255, 0.5"
var colorArr = colorStr.split(','),
i = colorArr.length;
while (i--)
{
colorArr[i] = parseInt(colorArr[i], 10);
}
var colorObj = {
r: colorArr[0],
g: colorArr[1],
b: colorArr[2],
a: colorArr[3]
}
Jak widać here:
R = hexToR("#FFFFFF");
G = hexToG("#FFFFFF");
B = hexToB("#FFFFFF");
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
Ten skrypt zasadniczo bierze każdą parę kolorów z twojego kodu heksadecymalnego (na przykład # F0556A) i przełącza ją do wejścia teger za pomocą parsentu z bazą 16.
Dobrze jest zarchiwizować ważne części linków w odpowiedzi, aby nie utraciła ona większości swojej wartości, gdy łącze zginie. –
Można by zrobić coś takiego:
$.fn.ToRgb = function()
{
if(this.charAt(0) == "#"){this = this.substring(1,7);} //remove the #
return {
R : parseInt(this.substring(0,2) ,16),
G : parseInt(this.substring(2,4) ,16),
B : parseInt(this.substring(4,6) ,16),
}
}
RGB = $('#my_element').css('backgroundColor').ToRgb();
/*
* console.log(rgb) =>
* {
* R: X
* G: X
* B: X
* }
*/
całkiem proste :)
Widzę, że '$ ('# my_element'). Css (" backgroundColor ")' zawsze zwraca coś takiego jak 'rgb (123, 87, 92)' lub 'rgba (123, 87, 92, 0.7)'. Czy może zwrócić również rzeczy takie jak '# 123456' lub' 123456'? –
Nie było to specjalnie wymagane dla – RobertPitt
@Robert - zakładano, że dane wejściowe będą podobne do 'rgba (...)', ponieważ prosta wartość szesnastkowa, np. '# 6400FF', nie może wyrazić nieprzezroczystości. –
Więcej prosta:
//javascript code
var color = $('#my_element').css('backgroundColor');
var rgb = /rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var r = rgb[1],
g = rgb[2],
b = rgb[3];
console.log('Red :' + r);
console.log('Green:' + g);
console.log('Blue :' + b);
Aby przekonwertować RGBA ciąg do obiektu z klawiszy:
convertRGBtoOBJ(colorString)
{
const rgbKeys = ['r', 'g', 'b', 'a'];
let rgbObj = {};
let color = colorString.replace(/^rgba?\(|\s+|\)$/g,'').split(',');
for (let i in rgbKeys)
rgbObj[rgbKeys[i]] = color[i] || 1;
return rgbObj;
}
console.log(convertRGBtoOBJ('rgba(23,54,230,0.5)'))
/*
Object {r: "23", g: "54", b: "230", a: 0.5}
*/
Jaki język Zamierzasz ? – Bobby
@Bobby: to JavaScript (z jQuery). –