CSS: registerProperty() 靜態方法
CSS.registerProperty() 靜態方法用於註冊自定義屬性，從而實現屬性型別檢查、設定預設值以及控制屬性是否繼承其值。
註冊自定義屬性可以讓您告訴瀏覽器該自定義屬性應如何表現；允許哪些型別，自定義屬性是否繼承其值，以及自定義屬性的預設值是什麼。
語法
js
CSS.registerProperty(propertyDefinition)
引數
propertyDefinition-
包含以下屬性的物件：
name-
一個字串，表示正在定義的屬性的名稱。
syntax可選-
一個字串，表示定義的屬性的預期語法。預設為
"*"。 inherits-
一個布林值，定義定義的屬性是否應繼承（
true）或不繼承（false）。預設為false。 initialValue可選-
一個字串，表示定義的屬性的初始值。
返回值
undefined.
異常
InvalidModificationErrorDOMException-
給定的
name已被註冊。 SyntaxErrorDOMException-
給定的
name不是有效的自定義屬性名稱（以兩個破折號開頭，例如--foo）。 TypeError-
未提供必需的
name和/或inherits字典成員。
示例
以下示例將使用 registerProperty() 註冊一個自定義屬性 --my-color，將其型別設定為顏色，設定預設值，並使其不繼承其值。
js
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
在此示例中，自定義屬性 --my-color 已使用 <color> 語法註冊。我們現在可以使用該屬性來在懸停或聚焦時為漸變設定動畫。請注意，使用註冊的屬性時，動畫可以正常工作，但使用未註冊的屬性時則不行！
css
.registered {
--my-color: #c0ffee;
background-image: linear-gradient(to right, white, var(--my-color));
transition: --my-color 1s ease-in-out;
}
.registered:hover,
.registered:focus {
--my-color: #b4d455;
}
.unregistered {
--unregistered: #c0ffee;
background-image: linear-gradient(to right, white, var(--unregistered));
transition: --unregistered 1s ease-in-out;
}
.unregistered:hover,
.unregistered:focus {
--unregistered: #b4d455;
}
button {
font-size: 3vw;
}
我們可以將這些樣式新增到一些按鈕上
html
<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>
規範
| 規範 |
|---|
| CSS 屬性和值 API Level 1 # the-registerproperty-function |
瀏覽器相容性
載入中…