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

前端技术 2023/09/03 JavaScript

本文实例讲述了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>

本文地址：https://www.stayed.cn/item/8738

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案