CSS 与 JavaScript 是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过 JavaScript 操作 CSS。

HTML 元素的 style 属性

操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute()方法、setAttribute()方法和removeAttribute()方法,直接读写或删除网页元素的style属性。

  1. div.setAttribute(
  2. 'style',
  3. 'background-color:red;' + 'border:1px solid black;'
  4. );

上面的代码相当于下面的 HTML 代码。

  1. <div style="background-color:red; border:1px solid black;" />

style不仅可以使用字符串读写,它本身还是一个对象,部署了 CSSStyleDeclaration 接口(详见下面的介绍),可以直接读写个别属性。

  1. e.style.fontSize = '18px';
  2. e.style.color = 'black';

CSSStyleDeclaration 接口

简介

CSSStyleDeclaration 接口用来操作元素的样式。三个地方部署了这个接口。

  • 元素节点的style属性(Element.style
  • CSSStyle实例的style属性
  • window.getComputedStyle()的返回值

CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性,不过,连词号需要变成骆驼拼写法。

  1. var divStyle = document.querySelector('div').style;
  2. divStyle.backgroundColor = 'red';
  3. divStyle.border = '1px solid black';
  4. divStyle.width = '100px';
  5. divStyle.height = '100px';
  6. divStyle.fontSize = '10em';
  7. divStyle.backgroundColor // red
  8. divStyle.border // 1px solid black
  9. divStyle.height // 100px
  10. divStyle.width // 100px

上面代码中,style属性的值是一个 CSSStyleDeclaration 实例。这个对象所包含的属性与 CSS 规则一一对应,但是名字需要改写,比如background-color写成backgroundColor。改写的规则是将横杠从 CSS 属性名中去除,然后将横杠后的第一个字母大写。如果 CSS 属性名是 JavaScript 保留字,则规则名之前需要加上字符串css,比如float写成cssFloat

注意,该对象的属性值都是字符串,设置时必须包括单位,但是不含规则结尾的分号。比如,divStyle.width不能写为100,而要写为100px

另外,Element.style返回的只是行内样式,并不是该元素的全部样式。通过样式表设置的样式,或者从父元素继承的样式,无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到。

CSSStyleDeclaration 实例属性

(1)CSSStyleDeclaration.cssText

CSSStyleDeclaration.cssText属性用来读写当前规则的所有样式声明文本。

  1. var divStyle = document.querySelector('div').style;
  2. divStyle.cssText = 'background-color: red;'
  3. + 'border: 1px solid black;'
  4. + 'height: 100px;'
  5. + 'width: 100px;';

注意,cssText的属性值不用改写 CSS 属性名。

删除一个元素的所有行内样式,最简便的方法就是设置cssText为空字符串。

  1. divStyle.cssText = '';

(2)CSSStyleDeclaration.length

CSSStyleDeclaration.length属性返回一个整数值,表示当前规则包含多少条样式声明。

  1. // HTML 代码如下
  2. // <div id="myDiv"
  3. // style="height: 1px;width: 100%;background-color: #CA1;"
  4. // ></div>
  5. var myDiv = document.getElementById('myDiv');
  6. var divStyle = myDiv.style;
  7. divStyle.length // 3

上面代码中,myDiv元素的行内样式共包含3条样式规则。

(3)CSSStyleDeclaration.parentRule

CSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块(CSSRule 实例)。如果不存在所属的样式块,该属性返回null

该属性只读,且只在使用 CSSRule 接口时有意义。

  1. var declaration = document.styleSheets[0].rules[0].style;
  2. declaration.parentRule === document.styleSheets[0].rules[0]
  3. // true

CSSStyleDeclaration 实例方法

(1)CSSStyleDeclaration.getPropertyPriority()

CSSStyleDeclaration.getPropertyPriority方法接受 CSS 样式的属性名作为参数,返回一个字符串,表示有没有设置important优先级。如果有就返回important,否则返回空字符串。

  1. // HTML 代码为
  2. // <div id="myDiv" style="margin: 10px!important; color: red;"/>
  3. var style = document.getElementById('myDiv').style;
  4. style.margin // "10px"
  5. style.getPropertyPriority('margin') // "important"
  6. style.getPropertyPriority('color') // ""

上面代码中,margin属性有important优先级,color属性没有。

(2)CSSStyleDeclaration.getPropertyValue()

CSSStyleDeclaration.getPropertyValue方法接受 CSS 样式属性名作为参数,返回一个字符串,表示该属性的属性值。

  1. // HTML 代码为
  2. // <div id="myDiv" style="margin: 10px!important; color: red;"/>
  3. var style = document.getElementById('myDiv').style;
  4. style.margin // "10px"
  5. style.getPropertyValue("margin") // "10px"

(3)CSSStyleDeclaration.item()

CSSStyleDeclaration.item方法接受一个整数值作为参数,返回该位置的 CSS 属性名。

  1. // HTML 代码为
  2. // <div id="myDiv" style="color: red; background-color: white;"/>
  3. var style = document.getElementById('myDiv').style;
  4. style.item(0) // "color"
  5. style.item(1) // "background-color"

上面代码中,0号位置的 CSS 属性名是color1号位置的 CSS 属性名是background-color

如果没有提供参数,这个方法会报错。如果参数值超过实际的属性数目,这个方法返回一个空字符值。

(4)CSSStyleDeclaration.removeProperty()

CSSStyleDeclaration.removeProperty方法接受一个属性名作为参数,在 CSS 规则里面移除这个属性,返回这个属性原来的值。

  1. // HTML 代码为
  2. // <div id="myDiv" style="color: red; background-color: white;">
  3. // 111
  4. // </div>
  5. var style = document.getElementById('myDiv').style;
  6. style.removeProperty('color') // 'red'
  7. // HTML 代码变为
  8. // <div id="myDiv" style="background-color: white;">

上面代码中,删除color属性以后,字体颜色从红色变成默认颜色。

(5)CSSStyleDeclaration.setProperty()

CSSStyleDeclaration.setProperty方法用来设置新的 CSS 属性。该方法没有返回值。

该方法可以接受三个参数。

  • 第一个参数:属性名,该参数是必需的。
  • 第二个参数:属性值,该参数可选。如果省略,则参数值默认为空字符串。
  • 第三个参数:优先级,该参数可选。如果设置,唯一的合法值是important,表示 CSS 规则里面的!important
  1. // HTML 代码为
  2. // <div id="myDiv" style="color: red; background-color: white;">
  3. // 111
  4. // </div>
  5. var style = document.getElementById('myDiv').style;
  6. style.setProperty('border', '1px solid blue');

上面代码执行后,myDiv元素就会出现蓝色的边框。

CSS 模块的侦测

CSS 的规格发展太快,新的模块层出不穷。不同浏览器的不同版本,对 CSS 模块的支持情况都不一样。有时候,需要知道当前浏览器是否支持某个模块,这就叫做“CSS模块的侦测”。

一个比较普遍适用的方法是,判断元素的style对象的某个属性值是否为字符串。

  1. typeof element.style.animationName === 'string';
  2. typeof element.style.transform === 'string';

如果该 CSS 属性确实存在,会返回一个字符串。即使该属性实际上并未设置,也会返回一个空字符串。如果该属性不存在,则会返回undefined

  1. document.body.style['maxWidth'] // ""
  2. document.body.style['maximumWidth'] // undefined

上面代码说明,这个浏览器支持max-width属性,但是不支持maximum-width属性。

注意,不管 CSS 属性名的写法带不带连词线,style属性上都能反映出该属性是否存在。

  1. document.body.style['backgroundColor'] // ""
  2. document.body.style['background-color'] // ""

另外,使用的时候,需要把不同浏览器的 CSS 前缀也考虑进去。

  1. var content = document.getElementById('content');
  2. typeof content.style['webkitAnimation'] === 'string'

这种侦测方法可以写成一个函数。

  1. function isPropertySupported(property) {
  2. if (property in document.body.style) return true;
  3. var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
  4. var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);
  5. for(var i = 0; i < prefixes.length; i++){
  6. if((prefixes[i] + prefProperty) in document.body.style) return true;
  7. }
  8. return false;
  9. }
  10. isPropertySupported('background-clip')
  11. // true

CSS 对象

浏览器原生提供 CSS 对象,为 JavaScript 操作 CSS 提供一些工具方法。

这个对象目前有两个静态方法。

CSS.escape()

CSS.escape方法用于转义 CSS 选择器里面的特殊字符。

  1. <div id="foo#bar">

上面代码中,该元素的id属性包含一个#号,该字符在 CSS 选择器里面有特殊含义。不能直接写成document.querySelector('#foo#bar'),只能写成document.querySelector('#foo\\#bar')。这里必须使用双斜杠的原因是,单引号字符串本身会转义一次斜杠。

CSS.escape方法就用来转义那些特殊字符。

  1. document.querySelector('#' + CSS.escape('foo#bar'))

CSS.supports()

CSS.supports方法返回一个布尔值,表示当前环境是否支持某一句 CSS 规则。

它的参数有两种写法,一种是第一个参数是属性名,第二个参数是属性值;另一种是整个参数就是一行完整的 CSS 语句。

  1. // 第一种写法
  2. CSS.supports('transform-origin', '5px') // true
  3. // 第二种写法
  4. CSS.supports('display: table-cell') // true

注意,第二种写法的参数结尾不能带有分号,否则结果不准确。

  1. CSS.supports('display: table-cell;') // false

window.getComputedStyle()

行内样式(inline style)具有最高的优先级,改变行内样式,通常会立即反映出来。但是,网页元素最终的样式是综合各种规则计算出来的。因此,如果想得到元素实际的样式,只读取行内样式是不够的,需要得到浏览器最终计算出来的样式规则。

window.getComputedStyle方法,就用来返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数,返回一个 CSSStyleDeclaration 实例,包含了指定节点的最终样式信息。所谓“最终样式信息”,指的是各种 CSS 规则叠加后的结果。

  1. var div = document.querySelector('div');
  2. var styleObj = window.getComputedStyle(div);
  3. styleObj.backgroundColor

上面代码中,得到的背景色就是div元素真正的背景色。

注意,CSSStyleDeclaration 实例是一个活的对象,任何对于样式的修改,会实时反映到这个实例上面。另外,这个实例是只读的。

getComputedStyle方法还可以接受第二个参数,表示当前元素的伪元素(比如:before:after:first-line:first-letter等)。

  1. var result = window.getComputedStyle(div, ':before');

下面的例子是如何获取元素的高度。

  1. var elem = document.getElementById('elem-container');
  2. var styleObj = window.getComputedStyle(elem, null)
  3. var height = styleObj.height;
  4. // 等同于
  5. var height = styleObj['height'];
  6. var height = styleObj.getPropertyValue('height');

上面代码得到的height属性,是浏览器最终渲染出来的高度,比其他方法得到的高度更可靠。由于styleObj是 CSSStyleDeclaration 实例,所以可以使用各种 CSSStyleDeclaration 的实例属性和方法。

有几点需要注意。

  • CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。比如,长度都是像素单位(返回值包括px后缀),颜色是rgb(#, #, #)rgba(#, #, #, #)格式。
  • CSS 规则的简写形式无效。比如,想读取margin属性的值,不能直接读,只能读marginLeftmarginTop等属性;再比如,font属性也是不能直接读的,只能读font-size等单个属性。
  • 如果读取 CSS 原始的属性名,要用方括号运算符,比如styleObj['z-index'];如果读取骆驼拼写法的 CSS 属性名,可以直接读取styleObj.zIndex
  • 该方法返回的 CSSStyleDeclaration 实例的cssText属性无效,返回undefined

CSS 伪元素

CSS 伪元素是通过 CSS 向 DOM 添加的元素,主要是通过:before:after选择器生成,然后用content属性指定伪元素的内容。

下面是一段 HTML 代码。

  1. <div id="test">Test content</div>

CSS 添加伪元素:before的写法如下。

  1. #test:before {
  2. content: 'Before ';
  3. color: #FF0;
  4. }

节点元素的style对象无法读写伪元素的样式,这时就要用到window.getComputedStyle()。JavaScript 获取伪元素,可以使用下面的方法。

  1. var test = document.querySelector('#test');
  2. var result = window.getComputedStyle(test, ':before').content;
  3. var color = window.getComputedStyle(test, ':before').color;

此外,也可以使用 CSSStyleDeclaration 实例的getPropertyValue方法,获取伪元素的属性。

  1. var result = window.getComputedStyle(test, ':before')
  2. .getPropertyValue('content');
  3. var color = window.getComputedStyle(test, ':before')
  4. .getPropertyValue('color');

StyleSheet 接口

概述

StyleSheet接口代表网页的一张样式表,包括<link>元素加载的样式表和<style>元素内嵌的样式表。

document对象的styleSheets属性,可以返回当前页面的所有StyleSheet实例(即所有样式表)。它是一个类似数组的对象。

  1. var sheets = document.styleSheets;
  2. var sheet = document.styleSheets[0];
  3. sheet instanceof StyleSheet // true

如果是<style>元素嵌入的样式表,还有另一种获取StyleSheet实例的方法,就是这个节点元素的sheet属性。

  1. // HTML 代码为 <style id="myStyle"></style>
  2. var myStyleSheet = document.getElementById('myStyle').sheet;
  3. myStyleSheet instanceof StyleSheet // true

严格地说,StyleSheet接口不仅包括网页样式表,还包括 XML 文档的样式表。所以,它有一个子类CSSStyleSheet表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例,实际上是CSSStyleSheet的实例。这个子接口继承了StyleSheet的所有属性和方法,并且定义了几个自己的属性,下面把这两个接口放在一起介绍。

实例属性

StyleSheet实例有以下属性。

(1)StyleSheet.disabled

StyleSheet.disabled返回一个布尔值,表示该样式表是否处于禁用状态。手动设置disabled属性为true,等同于在<link>元素里面,将这张样式表设为alternate stylesheet,即该样式表将不会生效。

注意,disabled属性只能在 JavaScript 脚本中设置,不能在 HTML 语句中设置。

(2)Stylesheet.href

Stylesheet.href返回样式表的网址。对于内嵌样式表,该属性返回null。该属性只读。

  1. document.styleSheets[0].href

(3)StyleSheet.media

StyleSheet.media属性返回一个类似数组的对象(MediaList实例),成员是表示适用媒介的字符串。表示当前样式表是用于屏幕(screen),还是用于打印(print)或手持设备(handheld),或各种媒介都适用(all)。该属性只读,默认值是screen

  1. document.styleSheets[0].media.mediaText
  2. // "all"

MediaList实例的appendMedium方法,用于增加媒介;deleteMedium方法用于删除媒介。

  1. document.styleSheets[0].media.appendMedium('handheld');
  2. document.styleSheets[0].media.deleteMedium('print');

(4)StyleSheet.title

StyleSheet.title属性返回样式表的title属性。

(5)StyleSheet.type

StyleSheet.type属性返回样式表的type属性,通常是text/css

  1. document.styleSheets[0].type // "text/css"

(6)StyleSheet.parentStyleSheet

CSS 的@import命令允许在样式表中加载其他样式表。StyleSheet.parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表,则该属性返回null

  1. if (stylesheet.parentStyleSheet) {
  2. sheet = stylesheet.parentStyleSheet;
  3. } else {
  4. sheet = stylesheet;
  5. }

(7)StyleSheet.ownerNode

StyleSheet.ownerNode属性返回StyleSheet对象所在的 DOM 节点,通常是<link><style>。对于那些由其他样式表引用的样式表,该属性为null

  1. // HTML代码为
  2. // <link rel="StyleSheet" href="example.css" type="text/css" />
  3. document.styleSheets[0].ownerNode // [object HTMLLinkElement]

(8)CSSStyleSheet.cssRules

CSSStyleSheet.cssRules属性指向一个类似数组的对象(CSSRuleList实例),里面每一个成员就是当前样式表的一条 CSS 规则。使用该规则的cssText属性,可以得到 CSS 规则对应的字符串。

  1. var sheet = document.querySelector('#styleElement').sheet;
  2. sheet.cssRules[0].cssText
  3. // "body { background-color: red; margin: 20px; }"
  4. sheet.cssRules[1].cssText
  5. // "p { line-height: 1.4em; color: blue; }"

每条 CSS 规则还有一个style属性,指向一个对象,用来读写具体的 CSS 命令。

  1. cssStyleSheet.cssRules[0].style.color = 'red';
  2. cssStyleSheet.cssRules[1].style.color = 'purple';

(9)CSSStyleSheet.ownerRule

有些样式表是通过@import规则输入的,它的ownerRule属性会返回一个CSSRule实例,代表那行@import规则。如果当前样式表不是通过@import引入的,ownerRule属性返回null

实例方法

(1)CSSStyleSheet.insertRule()

CSSStyleSheet.insertRule方法用于在当前样式表的插入一个新的 CSS 规则。

  1. var sheet = document.querySelector('#styleElement').sheet;
  2. sheet.insertRule('#block { color: white }', 0);
  3. sheet.insertRule('p { color: red }', 1);

该方法可以接受两个参数,第一个参数是表示 CSS 规则的字符串,这里只能有一条规则,否则会报错。第二个参数是该规则在样式表的插入位置(从0开始),该参数可选,默认为0(即默认插在样式表的头部)。注意,如果插入位置大于现有规则的数目,会报错。

该方法的返回值是新插入规则的位置序号。

注意,浏览器对脚本在样式表里面插入规则有很多限制。所以,这个方法最好放在try...catch里使用。

(2)CSSStyleSheet.deleteRule()

CSSStyleSheet.deleteRule方法用来在样式表里面移除一条规则,它的参数是该条规则在cssRules对象中的位置。该方法没有返回值。

  1. document.styleSheets[0].deleteRule(1);

实例:添加样式表

网页添加样式表有两种方式。一种是添加一张内置样式表,即在文档中添加一个<style>节点。

  1. // 写法一
  2. var style = document.createElement('style');
  3. style.setAttribute('media', 'screen');
  4. style.innerHTML = 'body{color:red}';
  5. document.head.appendChild(style);
  6. // 写法二
  7. var style = (function () {
  8. var style = document.createElement('style');
  9. document.head.appendChild(style);
  10. return style;
  11. })();
  12. style.sheet.insertRule('.foo{color:red;}', 0);

另一种是添加外部样式表,即在文档中添加一个<link>节点,然后将href属性指向外部样式表的 URL。

  1. var linkElm = document.createElement('link');
  2. linkElm.setAttribute('rel', 'stylesheet');
  3. linkElm.setAttribute('type', 'text/css');
  4. linkElm.setAttribute('href', 'reset-min.css');
  5. document.head.appendChild(linkElm);

CSSRuleList 接口

CSSRuleList 接口是一个类似数组的对象,表示一组 CSS 规则,成员都是 CSSRule 实例。

获取 CSSRuleList 实例,一般是通过StyleSheet.cssRules属性。

  1. // HTML 代码如下
  2. // <style id="myStyle">
  3. // h1 { color: red; }
  4. // p { color: blue; }
  5. // </style>
  6. var myStyleSheet = document.getElementById('myStyle').sheet;
  7. var crl = myStyleSheet.cssRules;
  8. crl instanceof CSSRuleList // true

CSSRuleList 实例里面,每一条规则(CSSRule 实例)可以通过rules.item(index)或者rules[index]拿到。CSS 规则的条数通过rules.length拿到。还是用上面的例子。

  1. crl[0] instanceof CSSRule // true
  2. crl.length // 2

注意,添加规则和删除规则不能在 CSSRuleList 实例操作,而要在它的父元素 StyleSheet 实例上,通过StyleSheet.insertRule()StyleSheet.deleteRule()操作。

CSSRule 接口

概述

一条 CSS 规则包括两个部分:CSS 选择器和样式声明。下面就是一条典型的 CSS 规则。

  1. .myClass {
  2. color: red;
  3. background-color: yellow;
  4. }

JavaScript 通过 CSSRule 接口操作 CSS 规则。一般通过 CSSRuleList 接口(StyleSheet.cssRules)获取 CSSRule 实例。

  1. // HTML 代码如下
  2. // <style id="myStyle">
  3. // .myClass {
  4. // color: red;
  5. // background-color: yellow;
  6. // }
  7. // </style>
  8. var myStyleSheet = document.getElementById('myStyle').sheet;
  9. var ruleList = myStyleSheet.cssRules;
  10. var rule = ruleList[0];
  11. rule instanceof CSSRule // true

CSSRule 实例的属性

(1)CSSRule.cssText

CSSRule.cssText属性返回当前规则的文本,还是使用上面的例子。

  1. rule.cssText
  2. // ".myClass { color: red; background-color: yellow; }"

如果规则是加载(@import)其他样式表,cssText属性返回@import 'url'

(2)CSSRule.parentStyleSheet

CSSRule.parentStyleSheet属性返回当前规则所在的样式表对象(StyleSheet 实例),还是使用上面的例子。

  1. rule.parentStyleSheet === myStyleSheet // true

(3)CSSRule.parentRule

CSSRule.parentRule属性返回包含当前规则的父规则,如果不存在父规则(即当前规则是顶层规则),则返回null

父规则最常见的情况是,当前规则包含在@media规则代码块之中。

  1. // HTML 代码如下
  2. // <style id="myStyle">
  3. // @supports (display: flex) {
  4. // @media screen and (min-width: 900px) {
  5. // article {
  6. // display: flex;
  7. // }
  8. // }
  9. // }
  10. // </style>
  11. var myStyleSheet = document.getElementById('myStyle').sheet;
  12. var ruleList = myStyleSheet.cssRules;
  13. var rule0 = ruleList[0];
  14. rule0.cssText
  15. // "@supports (display: flex) {
  16. // @media screen and (min-width: 900px) {
  17. // article { display: flex; }
  18. // }
  19. // }"
  20. // 由于这条规则内嵌其他规则,
  21. // 所以它有 cssRules 属性,且该属性是 CSSRuleList 实例
  22. rule0.cssRules instanceof CSSRuleList // true
  23. var rule1 = rule0.cssRules[0];
  24. rule1.cssText
  25. // "@media screen and (min-width: 900px) {
  26. // article { display: flex; }
  27. // }"
  28. var rule2 = rule1.cssRules[0];
  29. rule2.cssText
  30. // "article { display: flex; }"
  31. rule1.parentRule === rule0 // true
  32. rule2.parentRule === rule1 // true

(4)CSSRule.type

CSSRule.type属性返回一个整数值,表示当前规则的类型。

最常见的类型有以下几种。

  • 1:普通样式规则(CSSStyleRule 实例)
  • 3:@import规则
  • 4:@media规则(CSSMediaRule 实例)
  • 5:@font-face规则

CSSStyleRule 接口

如果一条 CSS 规则是普通的样式规则(不含特殊的 CSS 命令),那么除了 CSSRule 接口,它还部署了 CSSStyleRule 接口。

CSSStyleRule 接口有以下两个属性。

(1)CSSStyleRule.selectorText

CSSStyleRule.selectorText属性返回当前规则的选择器。

  1. var stylesheet = document.styleSheets[0];
  2. stylesheet.cssRules[0].selectorText // ".myClass"

注意,这个属性是可写的。

(2)CSSStyleRule.style

CSSStyleRule.style属性返回一个对象(CSSStyleDeclaration 实例),代表当前规则的样式声明,也就是选择器后面的大括号里面的部分。

  1. // HTML 代码为
  2. // <style id="myStyle">
  3. // p { color: red; }
  4. // </style>
  5. var styleSheet = document.getElementById('myStyle').sheet;
  6. styleSheet.cssRules[0].style instanceof CSSStyleDeclaration
  7. // true

CSSStyleDeclaration 实例的cssText属性,可以返回所有样式声明,格式为字符串。

  1. styleSheet.cssRules[0].style.cssText
  2. // "color: red;"
  3. styleSheet.cssRules[0].selectorText
  4. // "p"

CSSMediaRule 接口

如果一条 CSS 规则是@media代码块,那么它除了 CSSRule 接口,还部署了 CSSMediaRule 接口。

该接口主要提供media属性和conditionText属性。前者返回代表@media规则的一个对象(MediaList 实例),后者返回@media规则的生效条件。

  1. // HTML 代码如下
  2. // <style id="myStyle">
  3. // @media screen and (min-width: 900px) {
  4. // article { display: flex; }
  5. // }
  6. // </style>
  7. var styleSheet = document.getElementById('myStyle').sheet;
  8. styleSheet.cssRules[0] instanceof CSSMediaRule
  9. // true
  10. styleSheet.cssRules[0].media
  11. // {
  12. // 0: "screen and (min-width: 900px)",
  13. // appendMedium: function,
  14. // deleteMedium: function,
  15. // item: function,
  16. // length: 1,
  17. // mediaText: "screen and (min-width: 900px)"
  18. // }
  19. styleSheet.cssRules[0].conditionText
  20. // "screen and (min-width: 900px)"

window.matchMedia()

基本用法

window.matchMedia()方法用来将 CSS 的[Media Query](https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code)条件语句,转换成一个 MediaQueryList 实例。

  1. var mdl = window.matchMedia('(min-width: 400px)');
  2. mdl instanceof MediaQueryList // true

上面代码中,变量mdl就是 mediaQueryList 的实例。

注意,如果参数不是有效的MediaQuery条件语句,window.matchMedia不会报错,依然返回一个 MediaQueryList 实例。

  1. window.matchMedia('bad string') instanceof MediaQueryList // true

MediaQueryList 接口的实例属性

MediaQueryList 实例有三个属性。

(1)MediaQueryList.media

MediaQueryList.media属性返回一个字符串,表示对应的 MediaQuery 条件语句。

  1. var mql = window.matchMedia('(min-width: 400px)');
  2. mql.media // "(min-width: 400px)"

(2)MediaQueryList.matches

MediaQueryList.matches属性返回一个布尔值,表示当前页面是否符合指定的 MediaQuery 条件语句。

  1. if (window.matchMedia('(min-width: 400px)').matches) {
  2. /* 当前视口不小于 400 像素 */
  3. } else {
  4. /* 当前视口小于 400 像素 */
  5. }

下面的例子根据mediaQuery是否匹配当前环境,加载相应的 CSS 样式表。

  1. var result = window.matchMedia("(max-width: 700px)");
  2. if (result.matches){
  3. var linkElm = document.createElement('link');
  4. linkElm.setAttribute('rel', 'stylesheet');
  5. linkElm.setAttribute('type', 'text/css');
  6. linkElm.setAttribute('href', 'small.css');
  7. document.head.appendChild(linkElm);
  8. }

(3)MediaQueryList.onchange

如果 MediaQuery 条件语句的适配环境发生变化,会触发change事件。MediaQueryList.onchange属性用来指定change事件的监听函数。该函数的参数是change事件对象(MediaQueryListEvent 实例),该对象与 MediaQueryList 实例类似,也有mediamatches属性。

  1. var mql = window.matchMedia('(max-width: 600px)');
  2. mql.onchange = function(e) {
  3. if (e.matches) {
  4. /* 视口不超过 600 像素 */
  5. } else {
  6. /* 视口超过 600 像素 */
  7. }
  8. }

上面代码中,change事件发生后,存在两种可能。一种是显示宽度从600像素以上变为以下,另一种是从600像素以下变为以上,所以在监听函数内部要判断一下当前是哪一种情况。

MediaQueryList 接口的实例方法

MediaQueryList 实例有两个方法MediaQueryList.addListener()MediaQueryList.removeListener(),用来为change事件添加或撤销监听函数。

  1. var mql = window.matchMedia('(max-width: 600px)');
  2. // 指定监听函数
  3. mql.addListener(mqCallback);
  4. // 撤销监听函数
  5. mql.removeListener(mqCallback);
  6. function mqCallback(e) {
  7. if (e.matches) {
  8. /* 视口不超过 600 像素 */
  9. } else {
  10. /* 视口超过 600 像素 */
  11. }
  12. }

注意,MediaQueryList.removeListener()方法不能撤销MediaQueryList.onchange属性指定的监听函数。