js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法
本文實(shí)例講述了js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法。分享給大家供大家參考。具體分析如下：
比較常見的js前端功能，通過修改標(biāo)簽的className實(shí)現(xiàn)相應(yīng)的功能。
具體代碼如下：
<tbody>
<tr>
<td>js實(shí)現(xiàn)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="規(guī)格名稱" class="goods_sale_property" href="javascript:void(0);">規(guī)格名稱</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(){//單獨(dú)a標(biāo)簽點(diǎn)擊添加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程序設(shè)計(jì)有所幫助。
- 詳解用JS添加和刪除class類名
- 基于JavaScript實(shí)現(xiàn)類名的添加與移除
- 向JavaScript的數(shù)組中添加元素的方法小結(jié)
- 原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
- javaScript給元素添加多個(gè)class的簡單實(shí)現(xiàn)
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JS添加或修改控件的樣式(Class)實(shí)現(xiàn)方法
- Javascript 檢測、添加、移除樣式(className)函數(shù)代碼
- 原生js實(shí)現(xiàn)class的添加和刪除簡單代碼
- 原生js封裝添加class,刪除class的實(shí)例
- 原生js添加一個(gè)或多個(gè)類名的方法分析
相關(guān)文章
這篇文章主要介紹了微信小程序聊天功能的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
javascript實(shí)現(xiàn)可全選、反選及刪除表格的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)可全選、反選及刪除表格的方法,實(shí)例展示了javascript針對表格全選、反選、刪除、隔行變色、刪除提示等常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
基于邏輯運(yùn)算的簡單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版
基于邏輯運(yùn)算的簡單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版...2007-03-03
原生JS實(shí)現(xiàn)Ajax跨域請求flask響應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)Ajax跨域請求flask響應(yīng)內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
腳本藏身之處不過有四： 1、<script>標(biāo)簽、<link>標(biāo)簽、<style>標(biāo)簽、iframe標(biāo)簽 2、on開頭的標(biāo)簽屬性 3、javascript(vbscript)偽協(xié)議 4、css的epression2008-08-08
javascript 表格左右收縮實(shí)現(xiàn)代碼。2009-07-07
移動(dòng)端日期插件Mobiscroll.js使用詳解
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端日期插件Mobiscroll.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS中數(shù)組Array的用法,需要的朋友可以參考下2014-02-02
js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
判斷背景圖片是否加載成功想必大家對此很陌生吧，會(huì)了之后就可以判斷css背景圖片了，具體判斷代碼如下，感興趣的朋友可以參考下哈2013-05-05
微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級限制問題小結(jié)
在微信小程序開發(fā)中,wx.navigateTo和wx.redirectTo是兩種頁面跳轉(zhuǎn)方式,wx.navigateTo允許跳轉(zhuǎn)到新頁面并保留當(dāng)前頁面,適合需要返回的場景,但受頁面棧10層限制,wx.redirectTo則關(guān)閉當(dāng)前頁面后跳轉(zhuǎn),本文介紹微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級限制問題2024-10-10