切換樣式 toggleClass

2022-05-04 08:18:13 字數 741 閱讀 5082

在做某些效果的時候,可能會針對同一節點的某乙個樣式不斷的切換,也就是addclass與removeclass的互斥切換,比如隔行換色效果

jquery提供乙個toggleclass方法用於簡化這種互斥的邏輯,通過toggleclass方法動態新增刪除class,一次執行相當於addclass,再次執行相當於removeclass

.toggleclass( )方法:在匹配的元素集合中的每個元素上新增或刪除乙個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即:如果存在(不存在)就刪除(新增)乙個類

.toggleclass( classname ):在匹配的元素集合中的每個元素上用來切換的乙個或多個(用空格隔開)樣式類名

.toggleclass( classname, switch ):乙個布林值,用於判斷樣式是否應該被新增或移除

.toggleclass( [switch ] ):乙個用來判斷樣式類新增還是移除的 布林值

.toggleclass( function(index, class, switch) [, switch ] ):用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的乙個函式。接收元素的索引位置和元素舊的樣式類作為引數

注意事項:

toggleclass是乙個互斥的邏輯,也就是通過判斷對應的元素上是否存在指定的class名,如果有就刪除,如果沒有就增加

toggleclass會保留原有的class名後新增,通過空格隔開

vue中如何設定滑鼠經過切換樣式

在需要設定樣式的標籤上加上mouseover和mouseout屬性,如下 可以替換為v on 不影響使用 這裡p標籤的樣式是 content p event是指當前觸發的是什麼事件 滑鼠事件,鍵盤事件等 在vue的methods裡新增addactive和removeactive方法,分別是 adda...

有趣的toggleClass實現交替樣式

addclass和removeclass進行樣式型別的修改相信比較容易學習和接受 但是用這兩個方法去實現交替樣式,像一些列表的樣式,還有同型別資料的呈現,當然很多框架都給出了封裝好的方法去實現,但是js本身就提供了乙個很好用的函式來實現這一哦應用場景 例如這樣的 我們用toggleclass 切換類...

有趣的toggleClass實現交替樣式

addclass和removeclass進行樣式型別的修改相信比較容易學習和接受 但是用這兩個方法去實現交替樣式,像一些列表的樣式,還有同型別資料的呈現,當然很多框架都給出了封裝好的方法去實現,但是js本身就提供了乙個很好用的函式來實現這一哦應用場景 例如這樣的 我們用toggleclass 切換類...