How can i make JavaScript If Style Color work?-CodePudding

I have a simple if condition that checks the color of a element...

function changeBackgroundColor(element) {
          if (element.target.style.color == "#1abc9c"){
            // Do nothing
          } 
          else { // Whatever }

But it is not working. If i use common names like "Yellow, green, etc" it works. Any tips?

CodePudding user response：

document.getElementById('main').style.color returns a RGB value, not a HEX value.

Example:

if (document.getElementById('main').style.color == 'rgb(26, 188, 156)') {
    console.log("Colour is set")
} else {
    
}

<div id="main"  style="color: #1abc9c">
    Hello, world!
</div>

<script src="test.js"></script>

CodePudding user response：

style.color gives the direct color name or rgb value. It does not gives hex code. So for your case, you first need to change your hex code to rgb, then compare it with style.color So what you can do you can create a utility function

function getRgbFromHex(hexColorCode){
  const hexCode =  hexColorCode.startsWith('#') ? hexColorCode.substr(1) : hexColorCode;
  const hexR = hexCode.substring(0,2);
  const hexG = hexCode.substring(2,4);
  const hexB = hexCode.substring(4,6);
  
  return `rgb(${parseInt(hexR, 16)},${parseInt(hexG, 16)},${parseInt(hexB, 16)})`
  }

and then you can change your if condition to

if (element.target.style.color == getRgbFromHex("#1abc9c"))