jQuery get green background of div in plain text (get "green", not "rgb(0,128,0)", not "#0f0")

Question

I have a div with a background-color of green. In HTML and JavaScript:

<div id="rectangle" style="background-color:green;width:200px;height:100px"></div>

var div = document.getElementById("rectangle")
console.log(div.style.backgroundColor)

Console logs green.

I tried doing the same thing in jQuery. However I got:

var $div = $('#rectangle').css("backgroundColor"); 
console.log($div)

Console logs rgb(0, 128, 0)

Is there a way in jQuery to return the actual color of the text green. Alternatively is there an easy way to convert rgb(0, 128, 0) to green?

I am trying to GET the color, not set the color.

@Xufox I believe he's trying to indicate equality/result, not setting in those code snippets. — Heretic Monkey, Nov 29 '16 at 18:42
var jsSquare = document.getElementById('square').style.backgroundColor; console.log(jsSquare); ------> logs green :) — user2456977, Nov 29 '16 at 18:46
This could be helpful to you http://stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of-an-element — Geeky, Nov 29 '16 at 18:46
that is returning a hex, I simply want it to return the actual name of the color in plain english "green". My question is different — user2456977, Nov 29 '16 at 18:48
You'd need to create a mapping between the `rgb` values and color names. Not difficult, but quite time consuming. I expect there are one or two sites on the internet that have that mapping though. — Heretic Monkey, Nov 29 '16 at 18:49
if you are setting color with jquery then get should also be using jquery only . and if you are setting color with javascript then get should also be using javascript only — Mahi, Nov 29 '16 at 18:51
Getting a css value via `.css()` uses the [`getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) function, which returns the browser's interpretation of the CSS which is applied to that element at that point. That's why the value differs from that provided by `style.backgroundColor`, which is what was originally set. — Heretic Monkey, Nov 29 '16 at 20:04

score 2 · Answer 1 · answered Nov 29 '16 at 18:48

There is a tiny color library here https://github.com/Olical/color You can use it to convert the color in rgb string format into an array and than to it's name like this:

console.info(color.toName(color.toArray("rgb(0, 128, 0)")))

<script src="https://unpkg.com/olical-color@1.0.1/src/color.js"></script>

score 0 · Answer 2 · answered Nov 29 '16 at 21:45

When you use jQuery's css() function with a single argument, it gets the currently applied (i.e., after stylesheets, inline styles, etc. are applied) style property matching the passed argument via the getComputedStyle() function call.

Thus, when you call that function, you get the browser's internal representation of the CSS value originally set. Let's show that with an example, but using JavaScript against the DOM/CSSOM:

window.onload = function () {
  var kermit = document.getElementById('kermit');
  console.log('style: ', kermit.style.backgroundColor);
  console.log('computed: ', window.getComputedStyle(kermit).backgroundColor);
};

<div id="kermit" style="background-color: green; color: #fff">It ain't easy</div>

Depending on your browser, it should show green as the first log entry and rgb(0, 128, 0) for the second. I say "depending on your browser" because, as is explained in jQuery's css documentation:

Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

The easiest way to get what you want is ... well, beyond using a library as indicated by xxxmatko ... to create a mapping between the color values retrieved via getComputedStyle and the names. Note that this wouldn't tell you if the author of the stylesheet or whatever originally specified the color name, or some other value that happens to have the same RGB values.

window.onload = function () {
  var colorMap = {
    'rgb(0, 128, 0)': 'green'
  };
  var kermit = document.getElementById('kermit');
  var computed = window.getComputedStyle(kermit).backgroundColor;
  console.log('color name: ', colorMap[computed]);
};

<div id="kermit" style="background-color: green; color: #fff">It ain't easy</div>

Creating that map for the rest of the named colors (and the different corresponding color formats) is left as an exercise for the reader.

jQuery get green background of div in plain text (get "green", not "rgb(0,128,0)", not "#0f0")

2 Answers2