簡單說 通過JS控制CSS的各種方式(下)

2021-08-07 20:12:59 字數 622 閱讀 7889

上次我們說了8種通過js控制css的方式,但這麼多方式,應該用哪一種哪?哪一種又更適合我們呢?今天我們來說說這個。

我們用過的各種類庫或者框架中,經常會使用到js控制css的函式,比如jquery中的css() 方法。

想明白jquery中的css() 方法的實現原理,看這裡

今天我們也簡單的實現一下這個方法。

//需要兩個引數 el,css

//el :dom元素

//css :css規則 字串型別

function css(el, css)

//el如果不是dom,就發出警告,結束方法

} else

}

上面寫的這個函式,已經實現了我們要的功能了,其中判斷是否為dom元素的那部分還可以繼續提出來作為乙個單獨的方法,其中修改元素css的部分,是通過修改元素的style物件的csstext屬性,這種辦法修改css的優先順序很高,和直接寫內聯樣式一樣。

我們用js控制css,我們還是要考慮css優先順序的問題,為了能讓設定後的css起作用,我們還是選擇優先順序高的方法比較好。

簡單說 CSS的vertical align

vertical align屬性,是css屬性中乙個比較重要的屬性,也是比較不好理解的乙個。我們今天就來說說它。先來看看他的定義。定義和用法 vertical align 屬性設定元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降...

通過JS動態控制CSS偽元素

在做頁面的時候遇到這個問題的部分的原結構是引用ui框架vant的元件。我是想通過觸發js事件動態修改該元件裡偽元素的內容 因此收集了相關api和我最終的解決方案 insertrule方法 firefox safari opera和chrome都支援 mdn insertrule 該介面用來給當前樣式...

JS中push 的作用簡單說明

1.push 方法可以向陣列的末尾新增乙個或多個元素,並返回新的長度。2.語法 arrayobject.push newelement1,newelement2,3.返回值 把指定的值新增到陣列後的新長度。4.說明 push 方法可以把他的引數順序新增到arrayobject的尾部。它可以直接修改 ...