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>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS添加或修改控件的样式(Class)实现方法

    使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum

  • JavaScript修改css样式style

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • 利用js给datalist或select动态添加option选项的方法

    有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&

  • 在Vue组件上动态添加和删除属性方法

    如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法

  • html dom节点操作(获取/修改/添加或删除)

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 将 HTML 文档视作树结构.这种结构被称为节点树: HTML DOM Tree 实例 http://www

  • jQuery添加和删除指定标签的方法

    jQuery如何为指定标签添加和删除一个样式: 在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能. 一.使用addClass()和removeClass()添加和删除一个CSS类: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

  • vue 实现在同一界面实现组件的动态添加和删除功能

    1.插入静态组件,将自己想要循环的组件显示在页面上,利用v-for进行循环操作,操作包括增删. //所有要显示的子组件,写在一个li标签,有 v-for循环.   <li v-for="(item, index) in questionList" v-bind:key="index">           <el-row :gutter="20">             <el-col offset="2

  • JS传参及动态修改页面布局

    JS传参及动态修改页面布局

    一个关于JS传参及动态修改页面布局的简单小例子. 效果图: HTML: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" rel="external nofollow" /

  • JavaScript DOM元素常见操作详解【添加、删除、修改等】

    本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • js 弹出虚拟键盘修改密码的简单实例

    实例如下: //定义当前是否大写的状态 window.onload= function() { password1=null; initCalc(); } var CapsLockValue=0; var check; function setVariables() { tablewidth=630; // logo width, in pixels tableheight=20; // logo height, in pixels if (navigator.appName == "Netsc

随机推荐