Wie r, g, b, a-Werte von CSS Farbe zu extrahieren?
-
04-10-2019 - |
Frage
Was wäre der einfachste Weg, zu transformieren
$('#my_element').css('backgroundColor')
Objekt wie folgt:
{ r: red_value, g: green_value, b: blue_value, a: alpha_value }
Lösung
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]);
}
Versuchen Sie es hier http://jsbin.com/uhawa4
Bearbeiten :
var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');
for(var i in rgb) {
console.log(rgb[i]);
}
oder noch einfachere Art und Weise, nur bei Zahlen Ziel
var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);
for(var i in rgb) {
console.log(rgb[i]);
}
Andere Tipps
Sie würde so etwas wie:
$.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
* }
*/
Ganz einfach:)
Angenommen, Sie haben die folgende CSS-Regel:
#my_element {
background-color: rgba(100, 0, 255, 0.5);
}
Dann ist, wie Sie ein RBGA Objekt bekommen konnte:
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]
}
Wie man sehen hier :
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}
Dieses Skript im Grunde nimmt jedes Farbpaar von Ihrem hexcolor Code (zum Beispiel # F0556A) und schaltet es auf eine ganze Zahl mit parseInt mit Basis 16.
Mehr einfach:
//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);
Um RGBA-String-Objekt mit Schlüsseln zu konvertieren:
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}
*/
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow