如何检查Div是否具有特定CSS样式？附失败尝试代码

嘿，我发现你代码里的两个判断逻辑都踩了jQuery css()方法的小坑，咱们一步步来解决：

1. 为什么top的判断不生效？ #

jQuery的css()方法返回的样式值是带单位的！你设置的是top:10px，但代码里判断的是"10"，两者不匹配，所以逻辑永远走else分支。

修复方案： #

要么直接匹配带单位的字符串，要么转成数字再判断（更严谨）：

$("#red").click(function() { 
    const $red = $(this); // 缓存DOM对象，提升性能
    // 方式1：匹配带单位的字符串
    if($red.css("top") === "10px") { 
        $red.css("top", "100px"); 
    } else { 
        $red.css("top", "10px"); 
    }

    // 方式2：转成数字判断（推荐，避免单位差异）
    // if(parseInt($red.css("top"), 10) === 10) {
    //     $red.css("top", "100px");
    // } else {
    //     $red.css("top", "10px");
    // }
});

2. 为什么background-color的判断不可靠？ #

直接判断颜色名"red"是行不通的——不同浏览器对颜色的返回格式不一样：

• Chrome/Firefox会返回"rgb(255, 0, 0)"
• 部分环境可能返回十六进制值"#ff0000"
• 只有极少数情况会返回"red"这种颜色名

最优修复方案：用CSS类控制样式（推荐） #

这种方式不仅避免了颜色格式的兼容性问题，还让样式和逻辑分离，更易维护：

首先修改CSS，新增一个控制背景色的类：

#red{ 
    position: absolute; 
    top:10px; 
    left:10px; 
    width:100px; 
    height:100px; 
    background-color:red; 
    cursor:pointer;
    transition: all 0.3s; /* 可选：加个过渡动画让切换更丝滑 */
}

#red.grey-bg {
    background-color: grey;
}

然后修改JS代码，用toggleClass一键切换类：

$("#red").click(function() { 
    const $red = $(this);
    // 处理top值的逻辑（用上面修复后的方式）
    if(parseInt($red.css("top"), 10) === 10) {
        $red.css("top", "100px");
    } else {
        $red.css("top", "10px");
    }

    // 一键切换背景色类
    $red.toggleClass("grey-bg");
});

如果你一定要直接判断颜色值： #

可以写个辅助函数把颜色统一转成RGB格式再比较：

// 辅助函数：把任意颜色格式转成RGB
function getRGBColor(element, prop) {
    const color = $(element).css(prop);
    if (!color) return '';
    // 创建临时DOM元素来获取统一的RGB格式
    const tempDiv = $('<div/>').css({backgroundColor: color}).appendTo('body');
    const rgb = tempDiv.css('backgroundColor');
    tempDiv.remove();
    return rgb;
}

// 使用示例
$("#red").click(function() {
    const $red = $(this);
    // 处理top值的逻辑...

    // 判断背景色
    const currentBg = getRGBColor($red, 'background-color');
    if(currentBg === 'rgb(255, 0, 0)') { // 红色的RGB值
        $red.css('background-color', 'grey');
    } else {
        $red.css('background-color', 'red');
    }
});

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