如何用jQuery仅在CSS属性含linear-gradient函数时修改其值

没问题，针对你想仅当CSS属性包含特定函数时才修改其值的需求，我们可以根据实际场景选择两种不同的实现方式：

场景1：修改单个/多个目标元素的生效样式 #

如果你的需求是遍历页面中匹配选择器的元素，检查它们当前生效的background-image是否包含linear-gradient，再修改，用这个方法最直接：

// 遍历所有.btn元素
$('.btn').each(function() {
  // 获取该元素当前生效的background-image值
  const currentBgImage = $(this).css('background-image');
  
  // 检查值中是否包含linear-gradient函数
  if (currentBgImage.includes('linear-gradient')) {
    // 符合条件则将background-image设为none
    $(this).css('background-image', 'none');
  }
});

代码说明： #

• $('.btn').each()：确保每个匹配的元素都被单独检查和处理，避免遗漏
• $(this).css('background-image')：获取元素当前实际生效的样式值（不管样式来自内联、<style>标签还是外部样式表）
• includes('linear-gradient')：简单直接判断属性值中是否包含目标函数字符串
• 如果需要更严谨的匹配（比如避免误判包含相同字符串但不是函数的情况），可以改用正则表达式：

  if (/linear-gradient\(/.test(currentBgImage)) {
    $(this).css('background-image', 'none');
  }
  

  这个正则会精准匹配linear-gradient(的函数开头，减少误判概率。

场景2：直接修改全局样式表中的规则 #

如果你的目标是修改样式表中[class="btn"]这类选择器的规则（而不是逐个修改元素内联样式），可以通过遍历文档的样式表来实现：

// 遍历页面中所有样式表
for (let sheetIndex = 0; sheetIndex < document.styleSheets.length; sheetIndex++) {
  const styleSheet = document.styleSheets[sheetIndex];
  
  try {
    // 遍历当前样式表中的所有CSS规则
    for (let ruleIndex = 0; ruleIndex < styleSheet.cssRules.length; ruleIndex++) {
      const cssRule = styleSheet.cssRules[ruleIndex];
      
      // 匹配目标选择器（这里是[class="btn"]）
      if (cssRule.selectorText === '[class="btn"]') {
        // 检查该规则的background-image是否包含linear-gradient
        if (cssRule.style.backgroundImage.includes('linear-gradient')) {
          // 修改样式规则的属性值
          cssRule.style.backgroundImage = 'none';
        }
      }
    }
  } catch (error) {
    // 跨域的外部样式表会抛出安全错误，直接跳过即可
    continue;
  }
}

注意事项： #

• 这种方式会一次性修改所有匹配该选择器的元素样式，适合全局批量修改的场景
• 跨域加载的样式表（比如CDN上的样式文件）会因为浏览器安全限制无法访问，代码中用try/catch处理了这个问题

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