JS读写CSS样式的方法汇总(2)

var link1 = document.createElement('link'); link1.setAttribute('rel', 'stylesheet'); link1.setAttribute('type', 'text/css'); link1.setAttribute('href', 'reset-min.css'); document.head.appendChild(link1);

七、window.matchMedia方法用来检查CSS的mediaQuery语句。各种浏览器的最新版本（包括IE 10+）都支持该方法，对于不支持该方法的老式浏览器，可以使用第三方函数库matchMedia.js；
下面是mediaQuery语句的一个例子：

@media all and (max-device-width: 700px) { body {background: #FF0;} }

window.matchMedia方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有以下两个属性：
media：返回所查询的mediaQuery语句字符串。
matches：返回一个布尔值，表示当前环境是否匹配查询语句。

var result = window.matchMedia('(max-width: 700px)'); if (result.matches) { console.log('页面宽度小于等于700px'); } else { console.log('页面宽度大于700px'); }

window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法。如果mediaQuery查询结果发生变化，就调用指定的回调函数；

var mql = window.matchMedia("(max-width: 700px)"); mql.addListener(mqCallback);// 指定回调函数 mql.removeListener(mqCallback);// 撤销回调函数 function mqCallback(mql) { if (mql.matches) {// 宽度小于等于700像素} else { // 宽度大于700像素} }