Question

我正在研究聚合物项目，我想根据背景颜色改变汉堡包菜单的颜色，并使用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")的{{1}}值为rgb。

＆＃13;

yellow

＆＃13;

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

＆＃13;

jQuery以RGB格式返回元素颜色

但如果您不想这样做，那么您可以指定与<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>对应的十六进制颜色#ffff00，然后创建一个将yellow转换为{{1}的自定义函数如rgb中的值。

＆＃13;

hex

＆＃13;

rgb2hex

＆＃13;

Answer 2

Simpy添加宽度，高度为零的div。将其背景设置为您要比较的背景颜色，然后按照这种方式进行

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

这是剪辑

＆＃13;

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

＆＃13;

#menuBurger{
background-color : "yellow"
}

＆＃13;

<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>

＆＃13;

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

2 个答案: