jquery如何判断某元素是否具备指定的样式
更新时间：2013年11月05日 15:36:40 作者：
判断某元素是否具备指定的样式的方法有很多，在接下来的文章中为大家介绍下jquery是如何做到的
分为以下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")
}
});
注：以上代码可以实现点击切换背景颜色。
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")
}
});
注：以上代码可以实现点击切换背景颜色。
您可能感兴趣的文章:
- JQuery获取与设置HTML元素的内容或文本的实现代码
- jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
- JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
- jQuery使用append在html元素后同时添加多项内容的方法
- jquery动态增加text元素以及删除文本内容实例代码
- jQuery获取选中内容及设置元素属性的方法
- 使用jQuery内容过滤选择器选择元素实例讲解
- jQuery给元素添加样式的方法详解
- Jquery显示、隐藏元素以及添加删除样式
- jquery动态添加带有样式的HTML标签元素方法
- JQuery为元素添加样式的实现方法
- jQuery操作元素的内容和样式完整实例分析
相关文章
选择用户是一个比较常用的功能，主要包含2个功能点（保存已选选项、显示已选用户）2014-07-07
这篇文章主要介绍了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以参考下2014-04-04
这篇文章主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jquery使用animate方法实现控制元素移动,涉及jQuery中animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
由于placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。2015-06-06
下面小编就为大家带来一篇关于Jquery中的bind(),on()绑定事件方式总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本文给大家推荐了25个jQuery网格特效插件，在此集合中，我们将展示一些非常酷的jQuery插件和资源在网格布局设计，提高了数据的介绍。一些实用的插件，一定会提供一个美好的用户体验。同时，一些精致的资源，这将有助于布局精美的数据范围。2014-11-11
这篇文章主要介绍了jQuery中removeData()方法用法,实例形式分析了removeData()方法移除匹配元素指定数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery实现查找链接文字替换属性的方法,可实现针对链接文字的查找及链接属性进行替换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
取消选中单选框radio，第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的，大家可以看看下面的示例2014-09-09
最新评论