Get color of DIV in hex format JQuery

Question

This is my code:

function getTraits(trait) {
    $("#"+trait).on("click", function() {
        alert($(this).css('backgroundColor'));
        if (toHex($(this).css('background-color')) != highlightedColor) {
            $("#"+trait).css("background-color", highlightedColor);
            // If the element isn't highlighted, highlight it.
        } else {
            $(this).css("backgroundColor", defaultColor);
        }
    })
}

I am trying to toggle a highlight on a div on the user's click. I would like to get the background color of the div because it would be inefficient to store a boolean toggle for each and every div. So I want a toHex(rgb) function. I saw a lot of those on SO, so I tried using them and none of them worked. The alert() I put to show me the format JQuery was returning gave me rgba(0,0,0,0). I attempted to modify a regex I found like this:

var rgb = rgb.match(/^rgba((\d+),\s*(\d+),\s*(\d+))$/);

That failed to work with a TypeError: rgb is null.

Thanks for any help you can give me!

Answer 1

I know, not the answer to your question, but have you considered jQuery's toggleClass() option?

Define a highlighted CSS class:

DIV.default { background-color: whitesmoke; }
DIV.highlighted { background-color: yellow; }

and then when the user clicks your DIV:

function getTraits(trait) {
    $("#"+trait).on("click", function() {
        // Toggle both classes so as to turn one "off" 
        // and the other "on"
        $(this).toggleClass('default');
        $(this).toggleClass('highlighted');

        // Ensure we have at least one class (default)
        var hasOne = $(this).hasClass('highlighted') || $(this).hasClass('default');
        if (!hasOne) {
          $(this).addClass('default');
        }
    })
}

Answer 2

First of all get Background-Color and use the below function to convert it into HEX Value

var rgb=$(selector).css('background-color');
var hexColor=rgb2hex(rgb);

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}

Answer 3

Your problem: jquery will return rgba(0, 0, 0, 0) if there is no background color set (i.e. it is undefinied / null). The problem you have is that you are trying to parse an undefined rgb string into the hex converter.

I've added a clause into the converted from here, so that it returns white if the value is unset but this would need uncommenting, and isn't advised.

Advised solution is to use toggleClass, see the demo further down, showing how you can toggle higlighting on indiviidual elements or entire DOM trees.

---

Demo of rgb issue

// Cycle through each div
$("#example-wrap div").each(function() {

  // Store rgb color
  var rgb = $(this).css('backgroundColor');
  
  // Print rgb color to the div
  $(this).append( ": " + rgb);

  // Append the hex value
  $(this).append(" -> " + rgb2hex(rgb));
  
});


function rgb2hex(rgb) {
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  
  // Check if rgb is null
  if (rgb == null ) {
    // You could repalce the return with a default color, i.e. the line below
    // return "#ffffff"
    return "Error";
  }

  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  
}

#example-wrap div {
  border: 1px solid black;
  width: 100%;
  height: 50px;
  color: black;
}

#example-wrap .background-blue {
  background: blue;
  color: white;
}

#example-wrap .background-white {
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="example-wrap">

  <div id="background-set" style="background-color: red; color: white;">Background set in 'style' attribute</div>

  <div id="background-class" class="background-blue">Background set to blue via class</div>

  <div id="background-class" class="background-white">Background set to white via class</div>

  <div id="background-none">No background set</div>

</div>

---

Highlight via Toggle Class

This example lets you highlight individual elements tagged with .highlightable, as well as applying wrappers which mean all their children are highlightable via the class .highlightable-wrapper.

// Add click event to highlightable elements and wrappers
$(document).on("click", ".highlightable, .highlightable-wrapper *", function(e) {

  // Toggle highlight class
  $(this).toggleClass("highlight-me");
  
  // Stop click event from propogating (i.e. allow spans to be highlighted individually)
  // Uncomment this if you want propogation
  e.stopPropagation()

});

.highlight-me {
  color: blue;
}

.highlightable-wrapper .highlight-me, .highlightable-wrapper .highlight-me * {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="example-wrapper">

  <div class="highlightable">
    <h4>Individual Element Example</h4>
    This is an exampled of a div with the .highlightable class.
  </div>

  <hr style="margin: 20px 0px;">

  <div class="highlightable-wrapper">
  
    <h4>Wrapper Example</h4>
    
    <p>I am a paragraph within an element with the .highlightable-wrapper class.</p>
    
    <p>Click us to see us change <strong>I am a strong span, you can individually highlight me</strong>.</p>
    
  </div>
  
</div>