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

Question

我正在从事一个 polymer 元素，我想根据背景颜色更改汉堡菜单的颜色，并使用 JQuery 的 .css 函数。例如，如果背景颜色是蓝色，我希望我的按钮是白色的。这是我的代码:

    <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

你需要比较那个background-color与相应的rgb值为 css("background-color")正在给出 rgb 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

但如果你不想这样做，那么你可以分配一个十六进制颜色 #ffff00对应于 yellow然后创建一个自定义函数来转换 rgb至 hex中的值 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>