是否有获取HTML元素颜色的函数？支持ID/类选择吗？

当然可以实现你要的需求，用原生JavaScript就能搞定，不需要额外依赖：

1. 获取元素的颜色值 #

两种方式获取颜色： #

• 仅获取内联style中的颜色：直接访问元素的style.color属性，只能拿到在元素标签的style属性里定义的颜色。比如你的示例：

  <h2 style="color: blue">COLORED TEXT</h2>
  

  对应的代码：

  const h2Element = document.querySelector('h2');
  console.log(h2Element.style.color); // 输出 "blue"（部分浏览器可能返回RGB格式）
  

• 获取最终生效的颜色：如果颜色是通过CSS类、ID样式或者外部样式表定义的，用window.getComputedStyle()能拿到元素最终渲染的颜色，这是更通用的方法：

  const h2Element = document.querySelector('h2');
  const computedColor = window.getComputedStyle(h2Element).color;
  console.log(computedColor); // 可能输出 "blue" 或 "rgb(0, 0, 255)"，取决于浏览器
  

2. 通过ID或类选择目标元素 #

完全支持用ID或类选择器定位元素，常用的方法：

• 通过ID选择：用document.querySelector('#ID名称')或者更直接的document.getElementById('ID名称')，比如你的#title_blue：

  const targetElement = document.querySelector('#title_blue');
  // 或者
  const targetElement = document.getElementById('title_blue');
  

• 通过类选择：用document.querySelector('.类名称')选中第一个匹配的元素，或者document.querySelectorAll('.类名称')选中所有匹配的元素：

  // 选第一个带h2-blue类的元素
  const firstBlueH2 = document.querySelector('.h2-blue');
  // 选所有带h2-blue类的元素
  const allBlueH2s = document.querySelectorAll('.h2-blue');
  

补充说明 #

getComputedStyle返回的颜色格式可能不统一，比如颜色名会被转成RGB值，如果需要统一格式（比如十六进制或标准颜色名），可以自己写个简单的转换函数处理。

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