jquery如何判断某元素是否具备指定的样式


Posted in Javascript onNovember 05, 2013

分为以下2种情况:
1.如果css写成行内样式,可以通过获取style属性的值来判断,示例如下:
判断id为divid的div元素是否有font-size样式:

<div id="divid" style="float:left; font-size:12px;"></div> 
jquery代码如下: 
jQuery("#divid").each(function(){ 
var fontSize = $(this).attr("style").indexOf("font-size"); 
if(fontSize != (-1)){alert("已定义");} 
else{$(this).css({"float":"left","font-size":"12px"});} 
});

注:如果id为divid的div元素只有一个,则jquery的each只执行一次。
2.如果css写成类样式,可以通过获取class属性的值来判断,示例如下:
判断id为divid的div元素是否含有类样式divclass:
.divclass{ 
background-color: #F33; 
} 
<div id="divid" class="divclass"></div>

jquery代码如下:
jQuery("#divid").click(function(){ 
if(jQuery(this).attr("class").indexOf("divclass")>0){ 
jQuery(this).removeClass("divclass") 
}else{ 
jQuery(this).addClass("divclass") 
} 
});

注:以上代码可以实现点击切换背景颜色。
Javascript 相关文章推荐
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 #Javascript
js截取字符串的两种方法及区别详解
Nov 05 #Javascript
js实现在字符串中提取数字
Nov 05 #Javascript
提取字符串中年月日的函数代码
Nov 05 #Javascript
纯js分页代码(简洁实用)
Nov 05 #Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 #Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 #Javascript
You might like
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
javascript回到顶部特效
2016/07/30 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
详解js类型判断
2018/05/22 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
Python教程之全局变量用法
2016/06/27 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
追悼会子女答谢词
2014/01/28 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
500字小学生检讨书
2015/02/19 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
网吧管理制度范本
2015/08/05 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android