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

html-css028

jquery 检查元素是否有某个css属性,第1张

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

    }

}

结果如下

判断一个层是否隐藏:

复制代码

代码如下:$("#id").css("display")=="none"

在所有匹配的元素中,设置一个样式属性的值:

复制代码

代码如下:$("p").css("color","red")

把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式

复制代码

代码如下:$("p").css({

color:

"#ff0011",

background:

"blue"

})

如果属性名包含

"-"的话,必须使用引号:

复制代码

代码如下:

$("p").css({

"margin-left":

"10px",

"background-color":

"blue"

})

这个js、jq都没办法判断是否定义某个css,

这里可以提供两个解决思路:1、有人已经说了判断值是否等于0;但是这样一来会有个弊端,如果css中确实定义了margin-right:0也会把它当做未定义处理;

2、把css写成行内样式<a style="float:leftfont-size:12px">的</a>,这样可以获取style的值再判断是否有margin-right

$(".acont a").each(function(){

var ofright = $(this).attr("style").indexOf("margin-right")

if(ofright != (-1)){alert("已定义")}

else{$(this).css({"float":"left","font-size":"12px","margin-left":"10px"})}

})

如果只有一个就不需要循环了

好吧,再给你个思路,

在css中这么定义

.mr{margin-right:5px}

p.acont a{float:leftfont-size:12px}

HTML中这么写:

<p class="acont"><a class="mr">我是一匹来自北方的狼</a></p>

这个思路是通过相同样式冲突覆盖来解决的

p.acont a中如果定义了margin-right就会覆盖.mr中的margin-right:5px,使之不起作用

如果未定义.mr{margin-right:5px}这个就会起作用