media
特性为
StyleSheet
interface specifies the intended destination media for style information. It is a read-only, array-like
MediaList
object and can be removed with
deleteMedium()
and added with
appendMedium()
.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="document.css" type="text/css" media="screen" />
<style rel="stylesheet" type="text/css" media="screen, print">
body { background-color: snow; }
</style>
</head>
<body>
<script>
for (var iSheetIndex = 0; iSheetIndex < document.styleSheets.length; iSheetIndex++)
{
console.log('document.styleSheets[' + String(iSheetIndex) + '].media: ' +
JSON.stringify(document.styleSheets[iSheetIndex].media));
if (iSheetIndex === 0)
document.styleSheets[iSheetIndex].media.appendMedium('handheld');
if (iSheetIndex === 1)
document.styleSheets[iSheetIndex].media.deleteMedium('print');
console.log('document.styleSheets[' + String(iSheetIndex) + '].media: ' +
JSON.stringify(document.styleSheets[iSheetIndex].media));
}
/*
will log:
document.styleSheets[0].media: {"0":"screen"}
document.styleSheets[0].media: {"0":"screen","1":"handheld"}
document.styleSheets[1].media: {"0":"screen","1":"print"}
document.styleSheets[1].media: {"0":"screen"}
*/
</script>
</body>
</html>
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Object Model (CSSOM)
The definition of 'StyleSheet: media' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
media
|
Chrome 1 | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
完整支持
兼容性未知
StyleSheet
AnimationEvent
CSS
CSSConditionRule
CSSGroupingRule
CSSKeyframeRule
CSSKeyframesRule
CSSMediaRule
CSSNamespaceRule
CSSPageRule
CSSRule
CSSRuleList
CSSStyleDeclaration
CSSStyleRule
CSSStyleSheet
CSSSupportsRule
CaretPosition
LinkStyle
MediaQueryList
MediaQueryListListener
Screen
StyleSheetList
TransitionEvent