HTML DOM Source media属性用法及代码示例

HTML DOM 源媒体属性用于设置或返回 <source> 元素的 media 属性的值。 <source> 媒体属性用于接受通常在 CSS 中定义的任何有效媒体查询。该属性可以接受多个值。

用法:

它用于返回媒体属性。
```
SourceObject.media;
```
它用于设置媒体属性。
```
SourceObject.media="values";
```

可能的运算符

and:AND 运算符
not:非运算符
or:或运算符

DEVICES

all:适用于所有设备
aural:语音合成器
braille:盲文反馈装置
handheld:手持设备(小屏幕，有限带宽)
projection:投影仪
print:打印预览模式/打印页面
screen:电脑屏幕
tty:使用固定间距字符网格的电传打字机和类似媒体
tv:低分辨率或有限滚动能力类型的设备，如电视。

VALUES

width:它用于定位显示区域的宽度。
height:用于定位显示区域的高度
device-width：它用于目标显示或纸张的宽度。
device-height：它用于目标显示或纸张的高度。
orientation:目标显示器或纸张的方向。
aspect-ratio 宽度/高度：目标显示区域的比例。
device-aspect-ratio：Device-width/device-height 目标显示器/纸张的比率。
color:目标显示器的每种颜色的位数。
color-index：目标显示器可以处理的颜色数。
monochrome:单色帧缓冲区中每像素的位数。
分辨率像素：目标显示器/纸张的密度(dpi 或 dpcm)。
scan:电视显示器的扫描方法。
grid:如果输出设备是网格或位图。

例：下面的 HTML 代码返回源媒体属性。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align:center;
        }
  
        h1 {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM Source media property</h2>
  
    <audio controls>
        <source id="mySource" src="gameover.wav" 
                type="audio/mpeg" media="(min-width:600px)">
  
        <source src="gameover.ogg" type="audio/ogg">
    </audio>
    <p>Click the button to get the media of the source file.</p>
  
    <button onclick="myGeeks()">
        Get Media
    </button>
  
    <p id="demo"></p>
  
    <script>
        function myGeeks() {
            var x = document.getElementById("mySource").media;
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
  
</html>

输出：

HTML DOM Source media Property

支持的浏览器：

谷歌浏览器
Opera
Safari
Firefox
IE浏览器

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML DOM Source media Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。