blob: 77f49fae9684e19ac9b3b4b6c7490b2baf0eff32 (
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
|
---
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="/zh-CN/docs/CSS/Media_queries" title="CSS/Media queries">媒体查询</a>，并负责处理当媒体查询在其document上发生变化时向监听器进行通知的发送。</p>
<p>如果你需要以编程方式来检测一个document上的媒体查询的值的变化，这个<code>MediaQueryList</code>对象使得通过观察其document而检测它的媒体查询的值的变化成为可能，而不是周期性地对这些媒体查询的值进行检查。</p>
<h2 id="Method_overview" name="Method_overview">方法概述</h2>
<table class="standard-table">
<tbody>
<tr>
<td><code>void <a href="/zh-CN/docs/DOM/MediaQueryList#addListener()" title="DOM/MediaQueryList#addListener()">addListener</a>(MediaQueryListListener listener);</code></td>
</tr>
<tr>
<td><code>void <a href="/zh-CN/docs/DOM/MediaQueryList#removeListener()" title="DOM/MediaQueryList#removeListener()">removeListener</a>(MediaQueryListListener listener);</code></td>
</tr>
</tbody>
</table>
<h2 id="Properties" name="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>如果当前</code>{{ domxref("document") }}匹配该媒体查询列表则其值为true；反之其值为false。<strong>只读。</strong></td>
</tr>
<tr>
<td><code>media</code></td>
<td><code>DOMString</code></td>
<td>序列化的媒体查询列表。</td>
</tr>
</tbody>
</table>
<h2 id="Methods" name="Methods">方法</h2>
<h3 id="addListener()" name="addListener()">addListener()</h3>
<p>在媒体查询列表上增加一个新的监听器，如果列表中已经存在了这个指定的监听器，这个方法将失去作用。</p>
<pre>void addListener(
MediaQueryListListener listener
);</pre>
<h4 id="Parameter_(for_addListener_method)" name="Parameter_(for_addListener_method)">参数 ( 针对addListener方法)</h4>
<dl>
<dt><code>listener</code></dt>
<dd>当其媒体查询的求值结果发生变化时，该{{ domxref("MediaQueryListListener") }} 对象将会被调用。</dd>
</dl>
<h3 id="removeListener()" name="removeListener()">removeListener()</h3>
<p>从媒体查询列表中移除一个监听器，如果列表中不存在这个指定的监听器，则这个方法将失去作用。</p>
<pre>void removeListener(
MediaQueryListListener listener
);</pre>
<h4 id="Parameter_(for_removeListener_method)" name="Parameter_(for_removeListener_method)">参数 (针对removeListener方法)</h4>
<dl>
<dt><code>listener</code></dt>
<dd>该{{ domxref("MediaQueryListListener") }}对象将停止访问媒体查询的求值结果发生的变化。</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>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("6.0") }}</td>
<td>10</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</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>
<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">CSSOM视图模型: MediaQueryList接口</a></li>
</ul>
<h2 id="See_also" name="See_also">请参阅</h2>
<ul>
<li><a href="/zh-CN/docs/CSS/Media_queries" title="CSS/Media queries">CSS媒体查询</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">通过代码使用媒体查询</a></li>
<li>{{ domxref("window.matchMedia()") }}</li>
<li>{{ domxref("MediaQueryListListener") }}</li>
</ul>
|
