blob: ef3128a4b81bc972523d0947bd09b75454ea8bc9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: MediaQueryList
slug: Web/API/MediaQueryList
translation_of: Web/API/MediaQueryList
---
<div>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</div>
<p><code>MediaQueryList</code> 物件維護一組針對 {{ domxref("document") }} 的 <a href="/en-US/docs/CSS/Media_queries" style="line-height: 19.0909080505371px;" title="CSS/Media queries">media querie</a> , 並且當 media querie 相對應的文件狀態改變時，觸發註冊的事件處理器通知之。</p>
<p><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 19.0909080505371px;">MediaQueryList</span><span style="line-height: 19.0909080505371px;"> 物件讓我們不用一直定期去偵測，而是直接去觀察文件的狀態變化。</span></p>
<h2 id="Method_overview" name="Method_overview">Method overview</h2>
<table class="standard-table">
<tbody>
<tr>
<td><code>void <a href="/en-US/docs/DOM/MediaQueryList#addListener()" title="DOM/MediaQueryList#addListener()">addListener</a>(MediaQueryListListener listener);</code></td>
</tr>
<tr>
<td><code>void <a href="/en-US/docs/DOM/MediaQueryList#removeListener()" title="DOM/MediaQueryList#removeListener()">removeListener</a>(MediaQueryListListener listener);</code></td>
</tr>
</tbody>
</table>
<h2 id="Properties" name="Properties">Properties</h2>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Property</td>
<td class="header">Type</td>
<td class="header">Description</td>
</tr>
<tr>
<td><code>matches</code></td>
<td><code>boolean</code></td>
<td><code>true</code> 當 {{ domxref("document") }} 目前狀態符合 media query list 所維護的條件; 否則 false。 唯獨<strong>。</strong></td>
</tr>
<tr>
<td><code>media</code></td>
<td><code>DOMString</code></td>
<td>序列化 (serialized) 的 media query list.</td>
</tr>
</tbody>
</table>
<h2 id="Methods" name="Methods">Methods</h2>
<h3 id="addListener()" name="addListener()">addListener()</h3>
<p>添加一個新的事件處理器 (listener)，若 <span style="line-height: 19.0909080505371px;">listener </span>已存在則無作用。</p>
<pre>void addListener(
MediaQueryListListener listener
);</pre>
<h4 id="Parameter_(for_addListener_method)" name="Parameter_(for_addListener_method)">Parameter (for addListener method)</h4>
<dl>
<dt><code>listener</code></dt>
<dd>當 media query 對應的狀態改變時所觸發的事件處理函數 ({{ domxref("MediaQueryListListener") }})。</dd>
</dl>
<h3 id="removeListener()" name="removeListener()">removeListener()</h3>
<p><span style="line-height: 19.0909080505371px;">移除一個事件處理器 (</span><span style="line-height: 19.0909080505371px;">listener)，若 </span><span style="line-height: 19.0909080505371px;">listener 不</span><span style="line-height: 19.0909080505371px;">存在則無作用。</span></p>
<pre>void removeListener(
MediaQueryListListener listener
);</pre>
<h4 id="Parameter_(for_removeListener_method)" name="Parameter_(for_removeListener_method)">Parameter (for removeListener method)</h4>
<dl>
<dt><code>listener</code></dt>
<dd>欲移除的<span style="line-height: 19.0909080505371px;">事件處理函數</span><span style="line-height: 19.0909080505371px;"> ({{ domxref("MediaQueryListListener") }})。</span></dd>
</dl>
<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>9</td>
<td>{{ CompatGeckoDesktop("6.0") }}</td>
<td>10</td>
<td>12.1</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Specification" name="Specification"> </h2>
<h2 id="Specification" name="Specification">規範標準</h2>
<ul>
<li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
</ul>
<h2 id="See_also" name="See_also">延伸閱讀</h2>
<ul>
<li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
<li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
<li>{{ domxref("window.matchMedia()") }}</li>
<li>{{ domxref("MediaQueryListListener") }}</li>
</ul>
|
