根据背景颜色更改汉堡菜单的颜色

Question

I'm working on a polymer project and i want to change the color of my hamburger menu, depending on the background-color, and using the .css function by JQuery. For example, if the background-color is blue, i want my button to be white. this is my code :

    <paper-menu-button>
      <paper-icon-button id="menuBurger" icon="menu" slot="dropdown-trigger" style="background-color: yellow"></paper-icon-button>
      <paper-listbox slot="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-listbox>
    </paper-menu-button>

    <script type="text/javascript">
      $(document).ready(function(){
        if ($("#menuBurger").css("background-color") === "yellow") {
          $("#menuBurger").css('color', 'red');
        }
      });
    </script>

Answer 1

You need to compare that background-color with the corresponsing rgb value as css("background-color") is giving the rgb value of yellow .

 $(document).ready(function(){ if ($("#menuBurger").css("background-color") === "rgb(255, 255, 0)") { $("#menuBurger").css('color', 'red'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <paper-menu-button> <paper-icon-button id="menuBurger" icon="menu" slot="dropdown-trigger" style="background-color: yellow">ICON</paper-icon-button> <paper-listbox slot="dropdown-content"> <paper-item>Share</paper-item> <paper-item>Settings</paper-item> <paper-item>Help</paper-item> </paper-listbox> </paper-menu-button> 

jQuery returns the element color in RGB format

But if you do not want to do that then you can assign a hex color #ffff00 which corresponds to yellow and then create a custom function that will convert rgb to hex value as in rgb2hex .

 $(document).ready(function(){ function rgb2hex(orig){ var rgb = orig.replace(/\\s/g,'').match(/^rgba?\\((\\d+),(\\d+),(\\d+)/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) : orig; } var burgerbackground = $("#menuBurger").css("background-color"); if (rgb2hex(burgerbackground) === "#ffff00") { $("#menuBurger").css('color', 'red'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <paper-menu-button> <paper-icon-button id="menuBurger" icon="menu" slot="dropdown-trigger" style="background-color: #ffff00">ICON</paper-icon-button> <paper-listbox slot="dropdown-content"> <paper-item>Share</paper-item> <paper-item>Settings</paper-item> <paper-item>Help</paper-item> </paper-listbox> </paper-menu-button> 

Answer 2

Simpy add a div with width, height as zero. Set it's background to the background color you want to compare with and then do this way

 if ($("#menuBurger").css("background-color") == $("#test").css("background-color"))

Here is the snipped

 var testColor = "yellow" $("#test").css('background-color','yellow') $(document).ready(function(){ if ($("#menuBurger").css("background-color") == $("#test").css("background-color")) { $("#menuBurger").css('color', 'red'); } }); 

 #menuBurger{ background-color : "yellow" } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <paper-menu-button> <paper-icon-button id="menuBurger" icon="menu" slot="dropdown-trigger" style="background-color: #ffff00">ICON</paper-icon-button> <paper-listbox slot="dropdown-content"> <paper-item>Share</paper-item> <paper-item>Settings</paper-item> <paper-item>Help</paper-item> <div id="test"></div> </paper-listbox> </paper-menu-button>