問題描述
#elem {
-myCustom: 99;
}
或
#elem {
--myCustom: 99;
}
我在網上的例子中看到了上述兩種方法.兩者有什么區別?
I have seen both of the above used in examples online. What the difference between the two?
嘗試在 JavaScript 中訪問自定義屬性返回 null..
Trying to access custom properties in JavaScript returns null..
#elem {
-myCustom: 99;
}
<div id="elem">some text</div>
elem = document.getElementById("elem");
style= window.getComputedStyle(elem);
value = style.getPropertyValue('-myCustom');
alert(value);
推薦答案
- 單個前導短劃線用于供應商前綴
- 雙前導短劃線用于定義自定義屬性.
2 定義自定義屬性:'--*' 系列屬性
自定義屬性是名稱以兩個破折號開頭的任何屬性(U+002D HYPHEN-MINUS)，如 --foo.<custom-property-name>生產對應于此:它被定義為任何有效的標識符以兩個破折號開頭.
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 及更高版本中實現的.
It's worth noting that CSS variables are implemented in Firefox 31 and newer.
這篇關于自定義 CSS 屬性是否使用一個或兩個前導破折號?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！