jquery 检查元素是否有某个css属性

如题所述

jquery获取对象的css属性值的时候,就算我们没有给这个对象设置过css属性值,这些值也会存在,只不过有些是默认值。下面我们来输出一个div的css属性值,原始代码如下

<!DOCTYPE html>
<html>
<head>
    <title>DIV_TEST</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        #top1{

        }
    </style>
</head>
<body>
    <div id="top1">
        <u>你好我是某某某</u>
    </div>
<script src="jquery-3.2.1.min.js" ></script>
    <script>

        $(document).ready(function(){
            console.log("float的值是:"+$("#top1").css("float"));
            console.log("height的值是:"+$("#top1").css("height"));
            console.log("overflow的值是:"+$("#top1").css("overflow"));
            console.log("color的值是:"+$("#top1").css("color"));
            console.log("big的值是:"+$("#top1").css("big"));
        });

    </script>
</body>
</html>

结果如下

可以看到我们没有设置过div的css属性,除了高度以外剩下的只要存在这个css属性的都是默认值,唯一不同的是最后一个big属性,我们知道这个属性不是css的属性,因此我们判断有没有某个属性的时候可以通过这个方式判断

$(document).ready(function(){

    console.log("是否存在big属性:"+testHasCss($("#top1"),"big"));
    console.log("是否存在color属性:"+testHasCss($("#top1"),"color"));
    console.log("是否存在display属性:"+testHasCss($("#top1"),"display"));
    console.log("是否存在gogo属性:"+testHasCss($("#top1"),"gogo"));
});

var testHasCss = function(obj,cssStr){
    if((obj).css(cssStr) === undefined){
        return false;
    }else{
        return true;
    }
}

结果如下

温馨提示:答案为网友推荐,仅供参考
第1个回答  2017-10-24
hasClass方法
$(元素).hasClass(类名);
第2个回答  2019-05-29
if ($(元素).css(属性) == 属性值)
相似回答