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

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-321minjs" ></script>

    <script>

        $(document)ready(function(){

            consolelog("float的值是:"+$("#top1")css("float"));

            consolelog("height的值是:"+$("#top1")css("height"));

            consolelog("overflow的值是:"+$("#top1")css("overflow"));

            consolelog("color的值是:"+$("#top1")css("color"));

            consolelog("big的值是:"+$("#top1")css("big"));

        });

    </script>

</body>

</html>

结果如下

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

$(document)ready(function(){

    consolelog("是否存在big属性:"+testHasCss($("#top1"),"big"));

    consolelog("是否存在color属性:"+testHasCss($("#top1"),"color"));

    consolelog("是否存在display属性:"+testHasCss($("#top1"),"display"));

    consolelog("是否存在gogo属性:"+testHasCss($("#top1"),"gogo"));

});

var testHasCss = function(obj,cssStr){

    if((obj)css(cssStr) === undefined){

        return false;

    }else{

        return true;

    }

}

结果如下

把上面的

$(this)css("animation","running");

改成

$(this)css("animation-play-state","running");

试一下

你确定你测试的浏览器兼容animation样式吗

还有你有微animation写@keyframes吗

是的,jQuery使用 CSS 选择器来选取元素

jQuery 使用 CSS 选择器来选取 HTML 元素。例如:

$("p") 选取 <p> 元素。

$("pintro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery css()选择器是jquery中的一个功能。

可以用jquery中的css()方法;

css()有两个参数。第一个参数是必选参数,一般是指css样式中的属性。第二个参数是可选参数,一般是指css样式中属性的值。当只有第一个参数是,则是指获取该属性的值。如果也有第二个参数,那就是表示改变属性的值。

示例如下:

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<title></title>

<script type="text/javascript" language="javascript" src='jqueryjs'></script>

<script language='javascript'>

    $(function(){

        $('#btn1')click(function(){

            //css()为一个参数

            var divWid=$('#div-box')css('width');

            alert(divWid);

        });

        $('#btn2')click(function(){

            //css()为两个参数

            var divWid=$('#div-box')css('background','#00f');

        });

    })

</script>

<style type="text/css">

    #div-box {width:200px;height:100px;background:#f00;}

</style>

</head>

 

<body>

<div id="div-box"></div>

<input type='button' id='btn1' value='提取' />

<input type='button' id='btn2' value='改变' />

</body>

</html>

以上就是关于jquery 检查元素是否有某个css属性全部的内容,包括:jquery 检查元素是否有某个css属性、jquery 获取css3动画animation的值,改变animation的值问题、jquery使用css选择器来选取元素吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9489731.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-28
下一篇2023-04-28

发表评论

登录后才能评论

评论列表(0条)

    保存