0

Is there a way to override how javascript converts complex CSS color names to rgb values when applying them to DOM elements.

For example: document.getElementById("colorMe").style.background = "lightblue" will set the div.style object with a background = rgb(...).

However, document.getElementById("colorMe").style.background = "blue"will set the div.style object with a background = blue.

I would like to bypass how javascript is converting that color into an RGB value for complex color names. Is this possible?

Augie Gardner
  • 2,749
  • 3
  • 25
  • 36
  • If you wanted to do this, I would use something server-side to plug in the right values. – Brad Feb 01 '13 at 05:09
  • Why not just _use the Chrome Inspector_ instead of "View Source?" – Matt Ball Feb 01 '13 at 05:12
  • Doesn't "View Source" give you the source as authored? – Explosion Pills Feb 01 '13 at 05:28
  • @ExplosionPills -- that is true, edited to remove the "view source" part. Basically I would like if I call `var x = document.getElementById("colorMe").style.background` I would like that to show up as "lightblue" not "rgb(....)" – Augie Gardner Feb 01 '13 at 05:36
  • Take a look at [this question](http://stackoverflow.com/questions/14215256/get-css-value-as-written-in-stylesheet-with-jquery-or-regex). – thordarson Feb 01 '13 at 05:40
  • This doesn't seem to apply to all colors. When I try `lightblue`, I do get rgb back on reading, but when I try `black` or `white`, I get those strings back rather than the rgb – Explosion Pills Feb 01 '13 at 05:46
  • @ExplosionPills exactly, which is why I'm thinking that this has to be possible because it works on simple color names. The complex color names are being converted. – Augie Gardner Feb 01 '13 at 05:51

2 Answers2

2

The normalised format for CSS colours is rgb(R,G,B) for opaque colours, and rgba(R,G,B,A) for semi-transparent ones. No matter what you give as input, it is converted to one of these formats as output, and there's nothing you can do to chnge that.

However, you can save the name elsewhere, like this:

elem.setAttribute("data-color",elem.style.color = "lightblue");

Then just get elem.getAttribute("data-color") and you have your lightblue input.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • In the chrome inspector I am allowed to specify a source of `style = "background: lightblue;"`, so this code is valid. Is it javascript then, that is converting the value? And there is no way to overwrite that default conversion? – Augie Gardner Feb 01 '13 at 05:48
  • It's not JavaScript, it's just how the browser works internally. For instance, you *can* type `blah`, but the browser will convert it to `blah` - you won't see this except when you retrieve the DOM, just like you don't see the colour format change until you retrieve it. – Niet the Dark Absol Feb 01 '13 at 06:15
  • Unfortunately I believe I asked the question improperly. I don't believe this has to do with the browser, but how javascript converts colors in the `div.style` object. I can do `div.style.background = "blue"` and it will store it as "blue", but doing `div.style.background = "lightblue"` will store it as `rgb(...)`, so that later, when I access that inside the javascript object, it does not return "lightblue". I'm looking to override THAT functionality. not the browsers. – Augie Gardner Feb 01 '13 at 06:22
  • That's browser-specific, I'm afraid. – Niet the Dark Absol Feb 01 '13 at 06:40
  • I've asked the moderators to remove this question since all these answers began with the wrong question phrasing and title. I've reposted with a proper title. If it's browser-specific, perhaps there is a javascript cross-browser solution? If you think you still have an answer to this I encourage you to post on the question I re-made: [link](http://stackoverflow.com/questions/14641065/javascript-style-object-converts-complex-color-names-into-rgb) – Augie Gardner Feb 01 '13 at 06:46
0

There's a standard called webcolors...

http://en.wikipedia.org/wiki/Web_colors

When your browser reads lightblue it just translates it to 173 216 230.

Danilo Kobold
  • 2,562
  • 1
  • 21
  • 31
  • I understand that, and when it reads red, javascript will not convert it to RGB, and instead will leave it as "red". Is there a way to make lightblue NOT be converted within the `div.style` object when being set via javascript? – Augie Gardner Feb 01 '13 at 05:54
  • no, but if i understand what you are trying to do you can archive that with element.setAttribute('data-color', 'lightblue')... to keep track of that color thing... – Danilo Kobold Feb 01 '13 at 05:57