js實現(xiàn)class樣式的修改、添加及刪除的方法
本文實例講述了js實現(xiàn)class樣式的修改、添加及刪除的方法。分享給大家供大家參考。具體分析如下：
比較常見的js前端功能，通過修改標(biāo)簽的className實現(xiàn)相應(yīng)的功能。
具體代碼如下：
<tbody>
<tr>
<td>js實現(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(){//單獨a標(biāo)簽點擊添加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è)計有所幫助。
- 詳解用JS添加和刪除class類名
- 基于JavaScript實現(xiàn)類名的添加與移除
- 向JavaScript的數(shù)組中添加元素的方法小結(jié)
- 原生js實現(xiàn)查找/添加/刪除/指定元素的class
- javaScript給元素添加多個class的簡單實現(xiàn)
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JS添加或修改控件的樣式(Class)實現(xiàn)方法
- Javascript 檢測、添加、移除樣式(className)函數(shù)代碼
- 原生js實現(xiàn)class的添加和刪除簡單代碼
- 原生js封裝添加class,刪除class的實例
- 原生js添加一個或多個類名的方法分析
相關(guān)文章
javascript中關(guān)于break,continue的特殊用法與介紹
javascript大家所熟知中的for是一個循環(huán)體，循環(huán)體其中的break和continue也是大家都比較熟悉的功能，相信大家對它們的用法不會陌生，本文不是介紹其功能，本文假設(shè)你已經(jīng)熟悉break和continue的語意和用法2012-05-05
動態(tài)統(tǒng)計當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解
這篇文章主要介紹了動態(tài)統(tǒng)計當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
下面小編就為大家?guī)硪黄钊肜斫釰S addLoadEvent函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例
這篇文章主要介紹了JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了Boostrap popover用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
WebUploader是由Baidu WebFE(FEX)團(tuán)隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。這篇文章主要為大家詳細(xì)介紹了Web Uploader文件上傳插件使用方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript?映射器?array.flatMap()
這篇文章主要介紹了JavaScript?映射器?array.flatMap()，array.flatMap()是一個映射函數(shù)，它接收一個數(shù)組和一個映射函數(shù)，然后返回一個新的映射數(shù)組，下面進(jìn)入文章了解具體內(nèi)容2022-02-02
利用uniapp開發(fā)APP時的調(diào)試/安卓打包等詳解
uni-app??是一個使用??Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開發(fā)APP時的調(diào)試/安卓打包等的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解ECMAScript2019/ES10新屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12