CSS自定義屬性Expression

2021-08-29 06:18:26 字數 781 閱讀 7572

css的出現使網頁製作者在對網頁元素的控制方便許多,當然,有利必有弊,css只能對顏色、大小、距離等靜態樣式有效,對於要實現某些html元素的動態樣式就顯得有些力不從心。

有了css的自定義屬性expression,可以自己定義屬性,自己在屬性裡寫需要的**,這樣就可以結合css的特性與js特效,實現對整體頁面上相同元素的控制。是不是覺得有點不可思議?我們先拿新手們經常問的怎麼消除頁面上的鏈結虛線框為例。

通常的做法是:

link1

link2

link3

採用expression的效果如下:

注:如果你無法看到效果,請公升級你的瀏覽器試試。

採用expression的做法如下:

link1

link2

link3

說明:裡面的star就是自己任意定義的屬性,你可以隨自己喜好另外定義,接著包含在expression()裡的語句就是js指令碼,在自定義屬性與expression之間可別忘了還有乙個引號,因為實質還是css,所以放在style標籤內,而非script內。ok,這樣就很容易地用一句話實現了頁面中的鏈結虛線框的消除。不過你先別得意,如果觸發的特效是css的屬性變化,那麼出來的結果會跟你的本意有差別。例如你想隨滑鼠的移進移出而改變頁面中的文字框顏色更改,你可能想當然的會認為應該寫為

可結果卻是出現指令碼出錯,正確的寫法應該把css樣式的定義寫進函式內,如下所示:

看了這麼多,感覺怎麼樣,是不是有點概念了呢。使用css的自定義屬性很簡潔地用較少的**實現了用js產生的相同的效果,真正起到了事半功倍的作用,你還不趕快去試試?

CSS自定義屬性

1.自定義屬性的使用方法 自定義屬性分為 區域性自定義屬性 全域性自定義屬性 使用 宣告自定義屬性 使用兩個 宣告 例如 bg color red 注意這裡有乙個 冒號 這樣就宣告了乙個自定義屬性 bg color 和red 宣告後如何使用 var 自定義屬性名 括號還是要加上兩個 backgrou...

CSS 自定義屬性(變數)

var 函式用來獲取和使用 css 變數 css variables var 複製 語法 root 複製 用途 相容性目前沒有瀏覽器支援,chrome 之前支援後來又移除 參考通過下面的方式來宣告變數 variable name variable value 複製 變數名區分大小寫,變數值可以是顏色...

學習CSS自定義屬性

css變數 1.宣告css變數 body 有效 foo 4.變數的作用域 變數的作用域與css層疊樣式的規則一致 blue green red全域性變數通常放在 root 裡面 基本的語法就這些,詳情請看 1.宣告css變數 body 有效 foo 4.變數的作用域 變數的作用域與css層疊樣式的規...