- #elem {
- -myCustom: 99;
- }
要么
- #elem {
- --myCustom: 99;
- }
我已经在网上看到了以上两个例子.两者有什么区别？
尝试在JavaScript中访问自定义属性返回null ..
- #elem {
- -myCustom: 99;
- }
- <div id="elem">some text</div>
- elem = document.getElementById("elem");
- style= window.getComputedStyle(elem);
- value = style.getPropertyValue('-myCustom');
- alert(value);
解决方法
>单个前导短划线用于供应商前缀
>双前导短划线用于定义 custom properties.
>双前导短划线用于定义 custom properties.
07001
A custom property is any property whose name starts with two dashes
(U+002D HYPHEN-MINUS),like--foo. The<custom-property-name>
production corresponds to this: it’s defined as any valid identifier
that starts with two dashes.
W3C的一个例子：
- :root {
- --main-color: #06c;
- --accent-color: #006;
- }
- /* The rest of the CSS file */
- #foo h1 {
- color: var(--main-color);
- }
值得注意的是,CSS变量是在Firefox 31及更新版本中实现的.
