在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

addListener() 方法在 MediaQueryList interface adds a listener to the MediaQueryListener that will run a custom callback function in response to the media query status changing.

This is basically an alias for EventTarget.addEventListener() , for backwards compatibility purposes. Older browsers should use addListener 而不是 addEventListener since MediaQueryList only inherits from EventTarget in newer browsers.

句法

MediaQueryList.addListener(func)
					

参数

func

A function or function reference representing the callback function you want to run when the media query status changes. In the original implementation, the callback was a non-standard MediaQueryListListener object. In the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a MediaQueryListEvent , which inherits from 事件 .

返回值

Void.

范例

var para = document.querySelector('p');
var mql = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* the viewport is more than than 600 pixels wide */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}
mql.addListener(screenTest);
					

规范

规范	状态	注释
CSSOM (CSS 对象模型) 视图模块 The definition of 'addListener' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
addListener()	Chrome 9	Edge 12	Firefox 6	IE 10	Opera 12.1	Safari 5.1 5.1 Prior to Safari 14, MediaQueryList 基于 EventTarget , so you must use addListener() and removeListener() to observe media query lists.	WebView Android Yes	Chrome Android 18	Firefox Android Yes	Opera Android Yes	Safari iOS 5 5 Prior to Safari 14, MediaQueryList 基于 EventTarget , so you must use addListener() and removeListener() to observe media query lists.	Samsung Internet Android 1.0

图例

完整支持

完整支持

见实现注意事项。

另请参阅

• 媒体查询
• Using media queries from code
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent

元数据

• 最后修改： Aug 19, 2020

相关话题

1. CSS Object Model
2. MediaQueryList
3. 特性

   1. 匹配
   2. media
   3. onchange
4. 方法

   1. addListener()
   2. removeListener()
5. Related pages for CSSOM

   1. AnimationEvent
   2. CSS
   3. CSSConditionRule
   4. CSSGroupingRule
   5. CSSKeyframeRule
   6. CSSKeyframesRule
   7. CSSMediaRule
   8. CSSNamespaceRule
   9. CSSPageRule
   10. CSSRule
   11. CSSRuleList
   12. CSSStyleDeclaration
   13. CSSStyleRule
   14. CSSStyleSheet
   15. CSSSupportsRule
   16. CaretPosition
   17. LinkStyle
   18. MediaQueryListListener
   19. Screen
   20. StyleSheet
   21. StyleSheetList
   22. TransitionEvent