有趣的toggleClass實現交替樣式

2022-02-25 12:06:28 字數 335 閱讀 8387

addclass和removeclass進行樣式型別的修改相信比較容易學習和接受

但是用這兩個方法去實現交替樣式,像一些列表的樣式,還有同型別資料的呈現,

當然很多框架都給出了封裝好的方法去實現,但是js本身就提供了乙個很好用的函式來實現這一哦應用場景

例如這樣的:

我們用toggleclass(切換類):如果有這個class就刪除,沒有就新增,

首先定義乙個class樣式,然後進行移除、新增、移除的切換,就實現了這樣的效果。easy吧!

有趣的toggleClass實現交替樣式

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

基於偽元素(before after)的有趣例項

偽元素的英文是pseudo element,意思是虛假的元素。在css2中,偽元素 如 before 與偽類 如 hover 都是以單引號開頭 在css3中,為了跟偽類區分,變成雙冒號 如 before 但為了瀏覽器相容,大多數還在繼續使用單冒號。總體概括,偽元素有以下幾個重點 1.必須設定cont...

JOI 有趣的有趣的家庭菜園Fgarden

職業經營家庭菜園的joi君每年在自家的田地中種植一種叫做ioi草的植物。ioi草的種子在冬天被播下,春天會發芽並生長至乙個固定的高度。到了秋天,一些ioi草會結出美麗的果實,並被收穫,其他的ioi草則會在冬天枯萎。joi君的田地沿東西方向被劃分為n個區域,從西側開始的第i個區域中種植著ioi草i。在...