js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改、添加及删除的方法。分享给大家供大家参考。具体分析如下:
比较常见的js前端功能,通过修改标签的className实现相应的功能。
具体代码如下:
<table>
<tbody>
<tr>
<td>js实现class的样式的修改、添加、删除</td>
<td>
<a e_value="g_sn" ename="商品编码" class="goods_sale_property" href="javascript:void(0);">商品编码</a>
<a e_value="pdt_sn" ename="商品货号" class="goods_sale_property" href="javascript:void(0);">商品货号</a>
<a e_value="pdt_name" ename="规格名称" class="goods_sale_property" href="javascript:void(0);">规格名称</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td><a onclick="selectAll()" style="color:#F00">全选</a> </td>
<td><a onclick="selectNotAll()" style="color:#F00">全不选</a></td>
</tr>
</tbody>
</table> <script>
$('.goods_sale_property').click(function(){//单独a标签点击添加class
if($(this).hasClass('goods_sale_property_checked')){
$(this).removeClass('goods_sale_property_checked');
}else{
$(this).addClass('goods_sale_property_checked');
}
});
function selectAll(){//全选添class
$('.goods_sale_property').each(function(i){
$(this).addClass('goods_sale_property_checked');
});
}
function selectNotAll(){//全选删除class
$('.goods_sale_property').each(function(i){
$(this).removeClass('goods_sale_property_checked');
});
}
</script>
js实现class样式的修改、添加及删除的方法的更多相关文章
- 原生JS获取HTML样式并修改
大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出 ...
- 拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法
在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- js指定标签的id只能添加不能删除
<body> <form id="form1" runat="server"> <div> <input id=&qu ...
- List 重载添加-add,删除-remove方法,以及获取子集方法
package seday12; import java.util.ArrayList;import java.util.List; /*** @author xingsir* List重载了一对ad ...
- easyui学习笔记12—tab标签页的添加和删除
这一篇我们来看看标签页的添加和删除动作.我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查.easyui的文档写的还是很详细的 ...
- H5在js中向指定的元素添加样式
今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
随机推荐
- 【LeetCode】Repeated DNA Sequences 解题报告
[题目] All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: &quo ...
- NDK如何调试系统核心动态库(无系统源码的情况)
版权归薛定諤耗子所有,转载请表明出处. 1,有源码,需要导入符号表 2,没有源码,如何调试 1)运行ndk-gdb:../../ndk-gdb --verbose --launch=com.examp ...
- B - 队列,推荐
Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit Status Desc ...
- c#--foreach遍历的用法与split的用法
一. foreach循环用于列举出集合中所有的元素,foreach语句中的表达式由关键字in隔开的两个项组成.in右边的项是集合名,in左边的项是变量名,用来存放该集合中的每个元素. 该循环 ...
- C# 使用IENUMERABLE,YIELD
C# 使用IENUMERABLE,YIELD 前言 在上篇文章中我得出结论,遍历迭代器修改迭代器中项目的值未生效,是因为使用了yield return,并且每次遍历迭代器都执行返回迭代器的方法.这篇文 ...
- Android TextView(同时显示图片+文字)
见上图:需要图片和文字 在一起 之前的做法是用两个控件组成 <LinearLayout> <ImageView /> <TextView /> </Linea ...
- 如何查询一个库文件属于哪个rpm包
1.如果这个库文件已经存在 使用rpm命令: # rpm -qf /file/path (绝对路径) 例如: # rpm -qf /lib/libm.so.6 glibc-2.12-1.47.el ...
- OPENSSL库的使用-DES篇
一.单DES算法ECB模式加解密 1.使用函数DES_set_key_unchecked设置密钥 2.使用函数DES_ecb_encrypt来进行数据加解密 void DES_ecb_encrypt( ...
- 真机iOS SDK升级后xcode不能进行真机调试 怎么办
今天升级了一下iPod的SDK到iOS8,xcode仅仅能支持到7.1,真机调试遇到问题???以下是解决的方法! 找到xcode,点击右键.打开显示包内容,按路径Contents/Develpoer/ ...
- BZOJ 1529: [POI2005]ska Piggy banks( 并查集 )
每一连通块砸开一个就可以拿到所有的钱, 所以用并查集求连通块数 ------------------------------------------------------------------- ...