MediaQueryList: addListener() 方法
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
MediaQueryList 接口已弃用的 addListener() 方法会向 MediaQueryListener 添加一个侦听器，该侦听器将在媒体查询状态改变时运行自定义回调函数。
在较旧的浏览器中，MediaQueryList 尚未从 EventTarget 继承，因此此方法被提供为 EventTarget.addEventListener() 的别名。如果 addEventListener() 在您需要支持的浏览器中可用，请使用 addEventListener() 而不是 addListener()。
语法
js
addListener(func)
参数
func-
一个函数或函数引用，代表您希望在媒体查询状态改变时运行的回调函数。
返回值
无（undefined）。
示例
js
const paragraph = document.querySelector("p");
const mediaQueryList = window.matchMedia("(width <= 600px)");
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
paragraph.textContent = "This is a narrow screen — 600px wide or less.";
document.body.style.backgroundColor = "pink";
} else {
/* the viewport is more than 600 pixels wide */
paragraph.textContent = "This is a wide screen — more than 600px wide.";
document.body.style.backgroundColor = "aquamarine";
}
}
mediaQueryList.addListener(screenTest);
规范
| 规范 |
|---|
| CSSOM 视图模块 # dom-mediaquerylist-addlistener |
浏览器兼容性
加载中…