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 |
浏览器兼容性
加载中…