You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:仅当body有inline背景图时用jQuery为div添加类

看起来你之前的问题出在错误地判断了样式来源——很多时候用$('body').css('background-image')会返回计算后的样式(不管是inline、外部CSS还是类设置的),导致不管页面有没有inline的background-image,这个值都不为空,所以toggleClass总是触发添加类。

要准确判断body是否有inline的background-image样式,我们需要直接检查它的style属性,而不是计算后的样式。下面是可行的解决方案:

正确的实现代码

首先,我们通过attr('style')获取body的inline样式字符串,然后检查其中是否包含background-image:

// 获取body的inline样式属性
const bodyInlineStyle = $('body').attr('style');

// 判断是否存在inline的background-image(忽略大小写和空格)
const hasInlineBg = bodyInlineStyle && /background-image\s*:/i.test(bodyInlineStyle);

// 给目标div添加/移除类
const targetDiv = $('.your-target-div'); // 替换成你的div选择器
if (hasInlineBg) {
  targetDiv.addClass('your-new-class'); // 替换成你要添加的类名
} else {
  targetDiv.removeClass('your-new-class');
}

代码说明

  1. attr('style') vs css('background-image'):
    • css('background-image')会返回浏览器计算后的最终样式,不管这个样式是来自inline、CSS类还是外部样式表,所以无法区分是否是inline设置的。
    • attr('style')只返回元素标签上写的style属性内容,完全符合你要检查"inline样式"的需求。
  2. 正则表达式:/background-image\s*:/i用来匹配样式字符串中的background-image:,\s*允许属性和冒号之间有空格,i忽略大小写,避免因为大小写不一致导致判断失败。
  3. 安全判断:先检查bodyInlineStyle是否存在(如果body没有inline样式,attr('style')会返回undefined),避免后续正则报错。

简化版(使用toggleClass的布尔参数)

如果你还是想用toggleClass,可以直接把判断结果作为第二个参数传入,这样会根据布尔值自动添加或移除类:

const hasInlineBg = $('body').attr('style')?.includes('background-image');
$('.your-target-div').toggleClass('your-new-class', hasInlineBg);

注意这里用了可选链操作符?.,如果body没有style属性,attr('style')返回undefined,?.includes会直接返回undefined,相当于false,不会报错。

记得把代码中的.your-target-div和your-new-class替换成你实际使用的选择器和类名哦!

内容的提问来源于stack exchange,提问作者Peter

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 10:31:06