如何用jQuery判断html标签data-theme属性值？现有代码无法运行

你的代码存在几个关键问题，导致无法正常工作，下面逐个修正并给出正确实现：

错误点分析 #

1. 属性选择器语法错误：jQuery属性选择器中判断属性值应使用=而非==，正确写法是[data-theme="dark"]
2. jQuery对象的真值判断问题：$('[data-theme="dark"]')返回的是jQuery对象，无论是否匹配到元素，它在if条件中都会被视为true，必须通过length属性判断是否存在匹配元素
3. CSS属性设置错误：你要设置的是背景图，应该使用background-image属性，且值的格式应为url('路径')，而非直接写url属性

正确实现代码 #

写法一：直接选中<html>元素判断属性值 #

// 直接选中html元素，判断其data-theme属性值
if ($('html').attr('data-theme') === 'dark') {
  $('.epcBanner').css('background-image', 'url("~/Content/Images/EPC-.png")');
}

写法二：使用属性选择器结合length判断 #

// 通过属性选择器匹配元素，判断是否存在
if ($('html[data-theme="dark"]').length > 0) {
  $('.epcBanner').css('background-image', 'url("~/Content/Images/EPC-.png")');
}

写法三：使用jQuery的.data()方法（推荐） #

如果是通过jQuery设置的data-theme属性，或者想更优雅地读取data属性，可以用.data()方法：

if ($('html').data('theme') === 'dark') {
  $('.epcBanner').css('background-image', 'url("~/Content/Images/EPC-.png")');
}

额外注意事项 #

• 路径中的~/在前端环境中可能无法直接识别，如果是ASP.NET等后端框架，需要确保路径被正确解析为绝对路径
• 如果需要在主题切换时动态更新样式，建议监听属性变化事件，或者将逻辑封装为函数在切换时调用

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