如何使用jQuery检测<div>元素的style是否包含RGB值？

嘿，这个需求我熟，用jQuery实现起来很清晰。下面分两种常见场景给你拆解方案：

场景1：检测行内style属性中的RGB值 #

如果你的目标是检查元素直接写在style属性里的RGB（比如<div style="color: rgb(255,0,0);">），可以这么做：

代码示例（单个元素） #

// 选中目标div，这里用id选择器，你也可以换成类选择器、标签选择器
const $targetDiv = $('#my-target-div');
// 获取行内style的原始文本内容
const inlineStyleText = $targetDiv.attr('style');

// 匹配RGB/RGBA格式的正则表达式
// 兼容带空格、不带空格，以及RGBA带透明度的情况
const rgbPattern = /rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0|1|0\.\d+)\s*\)/i;

// 检测并输出结果
if (inlineStyleText && rgbPattern.test(inlineStyleText)) {
  console.log('这个div的行内style里确实包含RGB/RGBA值！');
} else {
  console.log('没找到行内的RGB/RGBA值~');
}

批量检测所有div #

如果要遍历页面上所有<div>元素进行检测，用each()方法就行：

$('div').each(function(index, element) {
  const $div = $(element);
  const inlineStyle = $div.attr('style');
  const rgbPattern = /rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0|1|0\.\d+)\s*\)/i;

  if (inlineStyle && rgbPattern.test(inlineStyle)) {
    console.log(`第${index+1}个div（ID：${$div.attr('id') || '无ID'}）包含行内RGB值`);
  }
});

场景2：检测计算后的样式中的RGB值 #

如果要检查元素最终生效的样式（包括从CSS类、外部样式表继承的颜色），就不能直接读style属性了，得用css()方法获取计算后的属性值：

代码示例（以背景色为例） #

const $targetDiv = $('#my-target-div');
// 获取计算后的背景色，浏览器会自动把十六进制、颜色名转成RGB/RGBA格式
const computedBgColor = $targetDiv.css('background-color');

// 简单匹配是否是RGB/RGBA格式
const isRgbFormat = /rgb\(|rgba\(/i.test(computedBgColor);

if (isRgbFormat) {
  console.log(`这个div的背景色是RGB格式：${computedBgColor}`);
} else {
  console.log('背景色不是RGB/RGBA格式');
}

小提示 #

• 正则表达式里的i标志是忽略大小写，所以RGB(255,255,255)也能匹配到
• 计算后的样式中，浏览器通常会把所有颜色值统一转为RGB/RGBA，所以即使你写的是#ff0000或者red，用css('color')拿到的也是rgb(255, 0, 0)

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