2

I'm trying to insert or edit HTML elements with JavaScript, but I can't figure out how to get JavaScript to output HTML with HEX colors instead of RGB.

For example, if I wanted to change the color of an element to #ff0000 the JavaScript would actually output rgb(255, 0, 0), even when I use HEX colors in the script.

Please see this JSFiddle for an example.

What's the shortest route I can take to get the HTML code to have HEX colors instead of RGB?

Note: This is not a duplicate of this question. It's a very different problem. Converting the RGB value of one specific element to a HEX value for use in something else is completely different. I'm trying to generated HTML elements with HEX values instead of RGB. I need the innerHTML of a container to contain HEX values.

Community
  • 1
  • 1
Narong
  • 476
  • 1
  • 3
  • 15
  • why is that a problem? – Daniel A. White Jul 29 '14 at 13:33
  • The generated code will be used in HTML emails and some email clients don't support RGB color values. – Narong Jul 29 '14 at 13:34
  • 1
    If you're going by what the browser tells you the value of a color attribute is, then you're making a mistake. What you tell the browser and what it tells you in response are two different things. There is no problem to be solved here; your code is fine. – Pointy Jul 29 '14 at 13:35
  • How would you go about exporting the HTML code without taking what the browser gives you? If I get the innerHTML of the container, all the color values are RGB. – Narong Jul 29 '14 at 13:37
  • How do I refute the duplicate tag? It's a COMPLETELY different question. Getting the color of an element and converting that value into HEX is NOT the same as GENERATING an element and having the innerHTML of that element having HEX. – Narong Jul 29 '14 at 13:48
  • I've reopened your question. But it seems to me that all you have to do is take the output of the function from the duplicate question and assign that output to the innerHTML instead of `theColor`. Am I missing something here? – Robert Harvey Jul 29 '14 at 14:14
  • I'm just wondering if there's a way to generate an element with HEX color values instead of RGB. Say I have a button that creates a table with the bg color #ff0000. When that button is clicked, the color values actually appearing in the innerHTML is RGB(255, 0, 0) and my designers can't simply copy and paste that into the email application because they need HEX values. Since HTML emails' styling is all done inline there could literally be hundreds of RGB values where it should be HEX. Is there no simple way to generate HTML code with HEX instead of converting to all RGB instances to HEX? – Narong Jul 29 '14 at 14:27
  • So if you had set the color to 'red', it seems like you would expect to get 'red' back? I don't think that's entirely reasonable. I'm guessing internally the browser engine (webkit?) is storing as RGB, so it is easiest to output that way when going from DOM->HTML. – jaydfwtx Jul 29 '14 at 15:39
  • This is exactly my problem. Thanks, @Narong. The scenario I'm dealing with is that the Wordpress sanitization function, `safecss_filter_attr()`, removes any style that uses parens (e.g. `rgb(0,0,0)`). So, in order to prevent WP from removing the rule, I'm trying to use the hex equivalents. Looks like I'm stuck with doing the conversion manually. :/ – rinogo Aug 15 '18 at 20:47

1 Answers1

2

Just postprocess the HTML using the answer from the other question:

http://jsfiddle.net/zbcBq/

document.getElementById('hiThere').addEventListener('click',function () {
    document.getElementById('myText').style.color = '#ff0000';

    var markup = document.body.innerHTML.trim();
    markup = markup.replace(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/, rgb2hex);

    console.log(markup);
});
jaydfwtx
  • 123
  • 1
  • 7
  • I understand this can be done, but I was looking for a solution to avoid having to do this step. I guess there really isn't a way, after all? The only way to get HEX out of JavaScript is to regex and replace? – Narong Jul 29 '14 at 15:32
  • I guess you could try to monkey with the prototype for the Color object to try to replace whatever method is outputting rgb, but I would go with the simple solution if I were you. ;) – jaydfwtx Jul 29 '14 at 15:46
  • If you use this approach, visit the ["other question"](https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value) to see improved versions of this code. (e.g. the `hex()` function is silly; just use `rgb[1].toString(16)`, etc.) – rinogo Aug 16 '18 at 13:57