如何通过JavaScript获取点击元素的颜色或背景色？

我在Linux系统中尝试使用EyeDropper API时遇到了问题：调用API时会要求共享屏幕，但完成共享后仍无法获取取色结果，点击按钮后出现异常（截图显示权限相关错误）。我的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>COLOR PICKER</title>

    <!-- GOOGLE FONTS -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
    <!-- CSS & SCRIPT -->
    <link rel="stylesheet" href="style.css" />
    <script defer src="./script.js"></script>
  </head>
  <body class="grid pi-cent">
    <div class="container flex-col">
      <header class="flex jc-cnt ai-cnt">
        <button class="pick-btn">Pick Color</button>
      </header>
      <article class="flex jc-sb">
        <p>Picked Color<s class="plural">s</s></p>
        <a href="">Clear All</a>
      </article>
      <ul class="grid">
        <li class="flex">
          <div
            class="color"
            style="--bg: #000000; width: 15px; height: 15px"
          ></div>
          <p class="clr-code">#0000</p>
        </li>
      </ul>
    </div>

    <script>
      const pickBtn = document.querySelector(".pick-btn");

      const pickColor = async (e) => {
        try {
          const eDrop = new window.EyeDropper();
          const resp = await eDrop.open();
          console.log(resp);
        } catch (err) {
          console.log(err);
        }
      };

      pickBtn.addEventListener("click", pickColor);
    </script>
  </body>
</html>

问题原因 #

Linux系统下，浏览器对EyeDropper API的实现依赖屏幕捕获权限，但Chrome等部分浏览器在Linux环境中的权限处理存在兼容性问题——即使授予了屏幕共享权限，API也无法正常读取像素数据，最终抛出异常。

解决步骤 #

1. 确认浏览器兼容性 #

• 升级Chrome/Edge到最新版本，旧版本对Linux平台的EyeDropper支持不完善
• 控制台输入'EyeDropper' in window，返回true才表示当前浏览器支持该API

2. 调整权限设置 #

• 打开浏览器设置，进入「隐私和安全」→「网站设置」→「屏幕共享」
• 将当前网站的权限设置为「允许」，避免每次都需要手动确认

3. 优化代码增强容错 #

添加API存在性检查和异常类型区分，避免无意义报错：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>COLOR PICKER</title>

  <!-- GOOGLE FONTS -->
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
  />
  <!-- CSS & SCRIPT -->
  <link rel="stylesheet" href="style.css" />
  <script defer src="./script.js"></script>
</head>
<body class="grid pi-cent">
  <div class="container flex-col">
    <header class="flex jc-cnt ai-cnt">
      <button class="pick-btn">Pick Color</button>
    </header>
    <article class="flex jc-sb">
      <p>Picked Color<s class="plural">s</s></p>
      <a href="">Clear All</a>
    </article>
    <ul class="grid">
      <li class="flex">
        <div
          class="color"
          style="--bg: #000000; width: 15px; height: 15px"
        ></div>
        <p class="clr-code">#0000</p>
      </li>
    </ul>
  </div>

  <script>
    const pickBtn = document.querySelector(".pick-btn");

    const pickColor = async (e) => {
      // 先检查API是否可用
      if (!('EyeDropper' in window)) {
        alert("你的浏览器不支持取色API，请升级或更换浏览器");
        return;
      }

      try {
        const eDrop = new window.EyeDropper();
        const resp = await eDrop.open();
        console.log("取色结果:", resp);
        // 将颜色添加到页面列表
        addColorToList(resp.sRGBHex);
      } catch (err) {
        // 区分用户取消和权限错误
        if (err.name === "AbortError") {
          console.log("用户取消了取色");
        } else {
          console.error("取色失败:", err);
          alert("取色失败，请检查屏幕共享权限是否正确授予");
        }
      }
    };

    // 辅助函数：新增颜色条目
    function addColorToList(colorHex) {
      const colorList = document.querySelector("ul");
      const newItem = document.createElement("li");
      newItem.className = "flex";
      newItem.innerHTML = `
        <div class="color" style="--bg: ${colorHex}; width: 15px; height: 15px"></div>
        <p class="clr-code">${colorHex}</p>
      `;
      colorList.appendChild(newItem);
      // 移除默认的复数标记
      document.querySelector(".plural")?.remove();
    }

    pickBtn.addEventListener("click", pickColor);
  </script>
</body>
</html>

额外建议 #

如果上述方法无效，可以尝试使用Firefox浏览器——Linux平台下Firefox对EyeDropper API的权限处理更稳定；同时避免在隐身模式测试，部分浏览器会限制隐身模式下的屏幕捕获权限。

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