Polymer项目中如何用jQuery的.css函数根据背景色修改汉堡菜单颜色

嘿，我来帮你搞定这个根据背景色动态调整汉堡菜单图标的需求！咱们一步步来：

核心思路 #

Polymer的<paper-icon-button>图标颜色是通过自定义CSS变量--iron-icon-fill-color控制的，而不是普通的color属性。所以我们需要：

1. 获取按钮的背景色
2. 判断背景色的特征（比如是否是蓝色，或者明暗程度）
3. 动态设置--iron-icon-fill-color变量

方案1：指定颜色匹配（比如蓝色背景用白色图标） #

如果你只想针对特定背景色做适配，可以用下面的代码：

1. 辅助函数：RGB转十六进制（统一颜色格式） #

因为jQuery返回的background-color可能是RGB格式，我们先转成十六进制方便判断：

function rgbToHex(rgb) {
  const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  if (!match) return rgb;
  const hex = (x) => {
    const hexVal = parseInt(x).toString(16);
    return hexVal.length === 1 ? '0' + hexVal : hexVal;
  };
  return `#${hex(match[1])}${hex(match[2])}${hex(match[3])}`;
}

2. 动态设置图标颜色 #

把代码放在DOM加载完成后执行：

$(document).ready(function() {
  const $menuBtn = $('#menuBurger');
  const bgColor = rgbToHex($menuBtn.css('background-color'));

  // 匹配蓝色背景（支持全十六进制和简写）
  if (bgColor === '#0000ff' || bgColor === '#00f') {
    $menuBtn.css('--iron-icon-fill-color', 'white');
  } 
  // 可以添加更多颜色规则，比如黄色背景用黑色
  else if (bgColor === '#ffff00' || bgColor === '#ff0') {
    $menuBtn.css('--iron-icon-fill-color', 'black');
  }
});

方案2：自动根据背景明暗适配（更通用） #

如果想让图标颜色自动根据背景深浅切换（深色背景用白色，浅色用黑色），可以用WCAG的亮度计算标准：

1. 亮度计算函数 #

function getColorBrightness(hex) {
  hex = hex.replace('#', '');
  const r = parseInt(hex.substring(0,2),16);
  const g = parseInt(hex.substring(2,4),16);
  const b = parseInt(hex.substring(4,6),16);
  // 计算相对亮度（WCAG标准公式）
  return (r * 299 + g * 587 + b * 114) / 1000;
}

2. 自动适配逻辑 #

$(document).ready(function() {
  const $menuBtn = $('#menuBurger');
  const bgColor = rgbToHex($menuBtn.css('background-color'));
  const brightness = getColorBrightness(bgColor);
  
  // 亮度小于128判定为深色背景，用白色图标；反之用黑色
  const iconColor = brightness < 128 ? 'white' : 'black';
  $menuBtn.css('--iron-icon-fill-color', iconColor);
});

处理动态变化的背景色 #

如果按钮的背景色是动态变化的（比如滚动、切换主题时），可以用MutationObserver监听样式变化，自动更新图标颜色：

$(document).ready(function() {
  const menuBtn = document.getElementById('menuBurger');
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'style') {
        const $menuBtn = $(menuBtn);
        const bgColor = rgbToHex($menuBtn.css('background-color'));
        const brightness = getColorBrightness(bgColor);
        const iconColor = brightness < 128 ? 'white' : 'black';
        $menuBtn.css('--iron-icon-fill-color', iconColor);
      }
    });
  });

  // 监听按钮的style属性变化
  observer.observe(menuBtn, { attributes: true });
});

注意事项 #

• 确保已经引入jQuery库，否则$函数无法使用
• Polymer元素可能需要等待DOM完全渲染后再执行代码，所以用$(document).ready()或者Polymer组件的ready()方法都可以

内容的提问来源于stack exchange，提问作者Dorian Seguin