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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。