jquery 检查元素是不是有某个css属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 检查元素是不是有某个css属性相关的知识，希望对你有一定的参考价值。
jquery获取对象的css属性值的时候，就算我们没有给这个对象设置过css属性值，这些值也会存在，只不过有些是默认值。下面我们来输出一个div的css属性值，原始代码如下
<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的属性，因此我们判断有没有某个属性的时候可以通过这个方式判断
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;
结果如下
$(元素).hasClass(类名); 参考技术B if ($(元素).css(属性) == 属性值)
jquery怎么判断是不是有某个元素
用jQuery检查某个元素在网页上是否存在时，应该根据获取元素的长度来判断，代码如下：if($("#tt").length > 0)
//元素存在时执行的代码
具体原因如下：
在JavaScript中，我们在使用传统的getElementById()和getElementsByTagName()时，如果在网页中找不到相
关元素，那么浏览器就会报错，影响后续代码的执行，所以为了避免浏览器报错，可以对元素进行判断，例如：
if(document.getElementById("tt")) //js判断元素是否存在
document.getElementById("tt").style.color = "red";
如果要操作的元素很多，就需要大量重复的工作，这往往让人厌倦。而jQuery的一大优势就是它完善的处理机制，即使用jQuery获取网页中
不存在的元素也不会报错。这是因为$("#tt")获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码：
if($("#tt"))
//永远执行，不管元素是否存在
这就是为什么要根据元素的长度来判断元素在页面中是否存在的原因。 参考技术A
可以配合length属性来判断
代码例子如下：
//判断id为aaa的元素是否存在if($("#aaa").length > 0)
//元素存在时执行的代码
以上是关于jquery 检查元素是不是有某个css属性的主要内容，如果未能解决你的问题，请参考以下文章