javascript高级程序设计---CSS操作
CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。
HTML元素的style属性
操作Element节点的CSS样式,最简单的方法之一就是使用节点对象的getAttribute方法、setAttribute方法和removeAttribute方法,读写或删除HTML元素的style属性。
div.setAttribute('style', 'background-color:red;' + 'border:1px solid black;');
Element节点的style属性
Element节点本身还提供style属性,用来操作CSS样式。
style属性指向一个对象,用来读写页面元素的行内CSS样式。
var divStyle = document.querySelector('div').style; divStyle.backgroundColor = 'red'; divStyle.border = '1px solid black'; divStyle.width = '100px'; divStyle.height = '100px'; divStyle.backgroundColor // red divStyle.border // 1px solid black divStyle.height // 100px divStyle.width // 100px
从上面代码可以看到,style对象的属性与CSS规则名一一对应,但是需要改写。具体规则是将横杠从CSS属性名中去除,然后将横杠后的第一个字母大写,比如background-color写成backgroundColor。如果CSS属性名是JavaScript保留字,则规则名之前需要加上字符串“css”,比如float写成cssFloat。
style对象的属性值都是字符串,而且包括单位。
cssText属性
style对象的cssText可以用来读写或删除整个style属性。
divStyle.cssText = 'background-color:red;' + 'border:1px solid black;' + 'height:100px;' + 'width:100px;';
cssText对应的是HTML元素的style属性,所以不用改写CSS属性名。
CSS模块的侦测
CSS的规格发展太快,新的模块层出不穷。不同浏览器的不同版本,对CSS模块的支持情况都不一样。有时候,需要知道当前浏览器是否支持某个模块,这就叫做“CSS模块的侦测”。
typeof element.style.animationName === 'string'; typeof element.style.transform === 'string';
如果该CSS属性确实存在,会返回一个字符串。即使该属性实际上并未设置,也会返回一个空字符串。如果该属性不存在,则会返回undefined。
style对象的以下三个方法,用来读写行内CSS规则。
divStyle.setProperty('background-color','red'); divStyle.getPropertyValue('background-color'); divStyle.removeProperty('background-color');
StyleSheet对象代表网页的一张样式表,它包括link节点加载的样式表和style节点内嵌的样式表。
document对象的styleSheets属性,可以返回当前页面的所有StyleSheet对象(即所有样式表)。它是一个类似数组的对象。
var sheets = document.styleSheets; var sheet = document.styleSheets[0];
link节点和style节点的sheet属性,也可以获取StyleSheet对象。
// HTML代码为 // <link id="linkElement" href="http://path/to/stylesheet"> // <style id="styleElement"> // body{font-size: 1.2 rem;} // </style> // 等同于document.styleSheets[0] document.querySelector('#linkElement').sheet // 等同于document.styleSheets[1] document.querySelector('#styleElement').sheet
cssRules属性
cssRules属性指向一个类似数组的对象,里面每一个成员就是当前样式表的一条CSS规则。使用该规则的cssText属性,可以得到CSS规则对应的字符串。
var sheet = document.querySelector('#styleElement').sheet; sheet.cssRules[0].cssText // "body { background-color: red; margin: 20px; }" sheet.cssRules[1].cssText // "p { line-height: 1.4em; color: blue; }"
每条CSS规则还有一个style属性,指向一个对象,用来读写具体的CSS命令。
styleSheet.cssRules[0].style.color = 'red'; styleSheet.cssRules[1].style.color = 'purple';
insertRule方法用于在当前样式表的cssRules对象插入CSS规则,deleteRule方法用于删除cssRules对象的CSS规则。
var sheet = document.querySelector('#styleElement').sheet; sheet.insertRule('#blanc { color:white }', 0); sheet.insertRule('p { color:red }',1); sheet.deleteRule(1);
insertRule方法的第一个参数是表示CSS规则的字符串,第二个参数是该规则在cssRules对象的插入位置。deleteRule方法的参数是该条规则在cssRules对象中的位置。
添加样式表
添加样式表有两种方式。一种是添加一张内置样式表,即在文档中添加一个<style>节点。
var style = document.createElement('style'); style.setAttribute('media', 'screen'); // 或者 style.setAttribute("media", "@media only screen and (max-width : 1024px)"); style.innerHTML = 'body{color:red}'; // 或者 sheet.insertRule("header { float: left; opacity: 0.8; }", 1); document.head.appendChild(style);
另一种是添加外部样式表,即在文档中添加一个link节点,然后将href属性指向外部样式表的URL
var linkElm = document.createElement('link'); linkElm.setAttribute('rel', 'sty规则lesheet'); linkElm.setAttribute('type', 'text/css'); linkElm.setAttribute('href', 'reset-min.css'); document.head.appendChild(linkElm);
CSS规则部署了CSSRule接口,它包括了以下属性。
cssText属性返回当前规则的文本。
// CSS代码为 // body { background-color: darkblue; } var stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].cssText // body { background-color: darkblue; }
parentStyleSheet属性返回定义当前规则的样式表对象。
如果一条CSS规则是普通的样式规则,那么除了CSSRule接口,它还部署了CSSStyleRule接口。
CSSRule接口有以下两个属性。
selectorText属性返回当前规则的选择器。
var stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].selectorText // ".myClass"
style属性返回一个对象,代表当前规则的样式声明,也就是选择器后面的大括号里面的部分。该对象部署了CSSStyleDeclaration接口,使用它的cssText属性,可以返回所有样式声明,格式为字符串。
document.styleSheets[0].cssRules[0].style.cssText // "background-color: gray;font-size: 120%;"
window.getComputedStyle()
getComputedStyle方法接受一个DOM节点对象作为参数,返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”,指的是各种CSS规则叠加后的结果。
var div = document.querySelector('div'); window.getComputedStyle(div).backgroundColor
getComputedStyle方法还可以接受第二个参数,表示指定节点的伪元素。
var result = window.getComputedStyle(div, ':before');
getComputedStyle方法返回的是一个CSSStyleDeclaration对象。但是此时,这个对象是只读的,也就是只能用来读取样式信息,不能用来设置。如果想设置样式,应该使用Element节点的style属性。
var elem = document.getElementById("elem-container"); var hValue = window.getComputedStyle(elem,null).getPropertyValue("height");
CSS事件
transitionEnd事件
CSS的过渡效果(transition)结束后,触发transitionEnd事件。
el.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() { console.log('Transition end'); }
animationstart事件,animationend事件,animationiteration事件
CSS动画有以下三个事件。
-
animationstart事件:动画开始时触发。
-
animationend事件:动画结束时触发。
-
animationiteration事件:开始新一轮动画循环时触发。如果animation-iteration-count属性等于1,该事件不触发,即只播放一轮的CSS动画,不会触发animationiteration事件。
div.addEventListener('animationiteration', function() { console.log('完成一次动画'); });
这三个事件的事件对象,都有animationName属性(返回产生过渡效果的CSS属性名)和elapsedTime属性(动画已经运行的秒数)。对于animationstart事件,elapsedTime属性等于0,除非animation-delay属性等于负值。