#elem {
-myCustom: 99;
}
OR
#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);
- 单前导破折号用于供应商前缀
- 双前导破折号用于定义自定义属性 http://dev.w3.org/csswg/css-variables/.
2 定义自定义属性:“--*”属性系列 http://dev.w3.org/csswg/css-variables/
自定义属性是名称以两个破折号开头的任何属性
(U+002D 连字符减号),例如--foo
. The <custom-property-name>
Production 对应于此:它被定义为任何有效的标识符
以两个破折号开头。
W3C 的一个例子:
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
值得注意的是,CSS 变量是在 Firefox 31 及更高版本中实现的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)