本文实例讲述了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样式的修改、添加及删除的方法的更多相关文章

  1. 原生JS获取HTML样式并修改

    大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出 ...

  2. 拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

    在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标 ...

  3. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  4. js指定标签的id只能添加不能删除

    <body> <form id="form1" runat="server"> <div> <input id=&qu ...

  5. List 重载添加-add,删除-remove方法,以及获取子集方法

    package seday12; import java.util.ArrayList;import java.util.List; /*** @author xingsir* List重载了一对ad ...

  6. easyui学习笔记12—tab标签页的添加和删除

    这一篇我们来看看标签页的添加和删除动作.我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查.easyui的文档写的还是很详细的 ...

  7. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  8. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  9. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

随机推荐

  1. 【LeetCode】Repeated DNA Sequences 解题报告

    [题目] All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: &quo ...

  2. NDK如何调试系统核心动态库(无系统源码的情况)

    版权归薛定諤耗子所有,转载请表明出处. 1,有源码,需要导入符号表 2,没有源码,如何调试 1)运行ndk-gdb:../../ndk-gdb --verbose --launch=com.examp ...

  3. B - 队列,推荐

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Status Desc ...

  4. c#--foreach遍历的用法与split的用法

    一. foreach循环用于列举出集合中所有的元素,foreach语句中的表达式由关键字in隔开的两个项组成.in右边的项是集合名,in左边的项是变量名,用来存放该集合中的每个元素.      该循环 ...

  5. C# 使用IENUMERABLE,YIELD

    C# 使用IENUMERABLE,YIELD 前言 在上篇文章中我得出结论,遍历迭代器修改迭代器中项目的值未生效,是因为使用了yield return,并且每次遍历迭代器都执行返回迭代器的方法.这篇文 ...

  6. Android TextView(同时显示图片+文字)

    见上图:需要图片和文字 在一起 之前的做法是用两个控件组成 <LinearLayout> <ImageView /> <TextView /> </Linea ...

  7. 如何查询一个库文件属于哪个rpm包

    1.如果这个库文件已经存在 使用rpm命令: # rpm -qf  /file/path  (绝对路径) 例如: # rpm -qf /lib/libm.so.6 glibc-2.12-1.47.el ...

  8. OPENSSL库的使用-DES篇

    一.单DES算法ECB模式加解密 1.使用函数DES_set_key_unchecked设置密钥 2.使用函数DES_ecb_encrypt来进行数据加解密 void DES_ecb_encrypt( ...

  9. 真机iOS SDK升级后xcode不能进行真机调试 怎么办

    今天升级了一下iPod的SDK到iOS8,xcode仅仅能支持到7.1,真机调试遇到问题???以下是解决的方法! 找到xcode,点击右键.打开显示包内容,按路径Contents/Develpoer/ ...

  10. BZOJ 1529: [POI2005]ska Piggy banks( 并查集 )

    每一连通块砸开一个就可以拿到所有的钱, 所以用并查集求连通块数 ------------------------------------------------------------------- ...