js設定變數:
dom節點.style.setproperty('--名稱','內容');
js讀取變數:
方式一:dom節點.style.getpropertyvalue('--名稱');
該方式只能讀取setproperty設定的變數,不能讀取在css中的變數,但都能設定css變數
方式二:getcomputedstyle(dom節點).getpropertyvalue('--名稱');
能讀取css中設定的變數和setproperty設定的變數,但不能.setproperty來設定變數
js刪除變數:
dom節點.removeproperty('--變數名');
css設定變數:
可以在任何選擇器內宣告變數,變數具有自己的作用域
:root
css讀取變數:
var(--變數名,預設值可選空格等都會被視作引數的內容)
選擇器/* 有效 */
.foo
(6)同乙個 css 變數,可以在多個選擇器內宣告。讀取的時候,不同優先順序內生效不同的變數
less和sass中變數格式和操作同css一致,才能使用js來操作(未驗證)
css使用變數 使用CSS變數優化CSS長度
css使用變數 您是否曾經不得不編寫大量css，卻迷失了自己的 如果您像我一樣，有時您必須將顏色或文字大小的十六進製制 儲存在可以訪問和重複使用的位置。在本文中，我將分享有關如何使用css變數優化css的知識。css變數是我們定義的值，可在整個css文件中重複使用。css變數 也稱為自定義屬性 在乙...
css 冷知識 css變數
css變數的宣告 變數名前加兩根連線詞 body 各種值都可以放入css變數 變數名大小寫敏感 變數讀取 var 函式 body var 函式可以使用第二個引數,表示變數的預設值。如果該變數不存在,就會使用這個預設值 color var foo,ccc var 函式也可以用在變數的宣告 body 注...
CSS基礎 使用CSS變數
當我們在開發較大的css檔案時，會遇到使用重複變數的情況，此時可以使用css變數來簡化開發，具體看 示例。宣告css變數 element 使用css變數 element 這裡使用mdn的例子進行說明 one two three four five 我們可以看到上述 中都重複用到了 backgroun...