What is the most efficient way to parse a CSS color in JavaScript?
function parseColor(input) {
var m;
Obviously, the numeric values will be easier to parse than names. So we do those first.
m = input.match(/^#([0-9a-f]{3})$/i)[1];
if( m) {
// in three-character format, each value is multiplied by 0x11 to give an
// even scale from 0x00 to 0xff
return [
parseInt(m.charAt(0),16)*0x11,
parseInt(m.charAt(1),16)*0x11,
parseInt(m.charAt(2),16)*0x11
];
}
That's one. Now for the full six-digit format:
m = input.match(/^#([0-9a-f]{6})$/i)[1];
if( m) {
return [
parseInt(m.substr(0,2),16),
parseInt(m.substr(2,2),16),
parseInt(m.substr(4,2),16)
];
}
And now for rgb()
format:
m = input.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if( m) {
return [m[1],m[2],m[3]];
}
Optionally, you can also add support for rgba
format, and even hsl
/hsla
if you add an HSL2RGB conversion function.
Finally, the named colours.
return ({
"red":[255,0,0],
"yellow":[255,255,0],
// ... and so on. Yes, you have to define ALL the colour codes.
})[input];
And close the function:
}
Actually, I don't know why I bothered writing all that. I just noticed you specified "assuming a major browser", I'm assuming that also means "up-to-date"? If so...
function parseColor(input) {
var div = document.createElement('div'), m;
div.style.color = input;
m = getComputedStyle(div).color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if( m) return [m[1],m[2],m[3]];
else throw new Error("Colour "+input+" could not be parsed.");
}
An up-to-date browser will convert any given colour to rgb()
format in its computed style. Just get it back, and read it out.
Parsing CSS in JavaScript / jQuery
There is a CSS parser written in Javascript called JSCSSP
How to extract r, g, b, a values from CSS color?
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]);
}
Try it here http://jsbin.com/uhawa4
Edit :
var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');
for(var i in rgb) {
console.log(rgb[i]);
}
or even simpler way, just aiming at numbers
var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);
for(var i in rgb) {
console.log(rgb[i]);
}
How do you read CSS rule values with JavaScript?
Adapted from here, building on scunliffe's answer:
function getStyle(className) {
var cssText = "";
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
cssText += classes[x].cssText || classes[x].style.cssText;
}
}
return cssText;
}
alert(getStyle('.test'));
Related Topics
Arrange Multiple Divs in CSS/Js
Changing Pseudo-Element Style from JavaScript
JavaScript Incapable of Getting Element's Max-Height via Element.Style.Maxheight
How to Set the Universal CSS Selector with JavaScript
Multiline Typewriter Effect with Two Consistent Words
JavaScript Efficiency: 'For' VS 'Foreach'
Convert Special Characters to HTML in JavaScript
Syntaxerror: Use of Const in Strict Mode
Modifying Location.Hash Without Page Scrolling
How to Define Two Angular Apps/Modules in One Page
Why Does JavaScript Replace Only First Instance When Using Replace
New Date() Is Working in Chrome But Not Firefox
Is There an Equivalent of the _Nosuchmethod_ Feature for Properties, or a Way to Implement It in Js
Google Chrome Console.Log() Inconsistency with Objects and Arrays
Is There a Max Number of Arguments JavaScript Functions Can Accept
Detect Double Tap on iPad or iPhone Screen Using JavaScript
How to Detect in iOS Webapp When Switching Back to Safari from Background
Is There an Alternative Method to Use Onbeforeunload in Mobile Safari