首页 > 代码库 > JavaScript 操作CSS
JavaScript 操作CSS
JavaScript 操作CSS
关于CSS的介绍不是本文的内容范围，本文主要介绍如何使用JavaScript操作CSS。
1. 使用JavaScript操作Inline Styles
所有的文档元素都有style属性，我们可以通过直接操作style属性来修改相关元素的样式。
需要注意的是style属性的值并不是一个string对象，而是一个CSSStyleDeclaration对象。
我们可以通过如下方式设置style属性的值。
e.style.fontSize = "24pt"; //由于JavaScript变量不允许使用连字符，所以设置相关属性时需要将该属性名的连字符移除，并且大写属性名非首单词首字母。font-size ==> fontSize。e.style.color = "blue";
e.style.cssFloat = "right" //由于float是JavaScript的关键字，所以css float属性加了css前缀
设置为CSSStyleDeclaration对象属性的值只能为string。
有时，我们想获得Inline Styles的字符串形式，可以通过CSSStyleDeclaration对象的cssText属性获得。
e.style.cssText
2. CSS动画效果的制作
一个经常使用JavaScript操作CSS的场景就是制作一些动画效果。这可以通过定时器动态修改一些css样式的值来实现。
以下为一个产生震动效果的JavaScript函数。
// shake the specified elementfunction shake(e, oncomplete, distance, time) { if (typeof e === "string") e = document.getElementById(e); if (!time) time = 500; if (!distance) distance = 5; var originalStyle = e.style.cssText; e.style.position = "relative"; var start = (new Date()).getTime(); animate(); function animate() { var now = (new Date()).getTime(); var elapsed = now - start; var fraction = elapsed / time; if (fraction < 1) { var x = distance * Math.sin(fraction * 4 * Math.PI); e.style.left = x + "px"; setTimeout(animate, Math.min(25, time - elapsed)); } else { e.style.cssText = originalStyle; if (oncomplete) oncomplete(e); } }}在最新的CSS3中，我们可以直接使用CSS实现一些动画效果而无需JavaScript的帮助。
3. 查询元素的Computed Styles
我们通过style属性得到的是元素的内联样式，并不是该元素的实际应用的样式。
元素实际的样式是由多级样式表按照指定的优先级计算出来的。我们可以通过window对象的getComputedStyle方法得到元素的实际样式。
var title = document.getElementById("sectionTitle");var titleStyles = window.getComputedStyle(element, null);该方法接受两个参数，一个是元素对象，另一个用于传入CSS伪类(:first-line...)，通常出入null值或者空字符串。
该方法返回一个只读的CSSStyleDeclaration对象。并且该对象的cssText属性是undefined。
IE8以前包括IE8并不支持该函数，可以通过元素的currentStyle部分代替该方法，但是二者有些许不同，这里不再详述。
4. 操作CSS Classes
通过CSS Class, 我们可以灵活的组织页面样式，实现页面样式的重用与模块化。
在JavaScript中，我们通过元素的className属性获得为元素指定的Classes。该值是一个字符串，class之间用空格分开。
在HTML5中，为元素定义了一个classList属性，该属性返回一个只读的类数组对象DOMTokenList。该对象包含了操作
class的方法add，remove，toggle，contains。And the DOMTokenList is a "live" representation of the element‘s set of classes。
我们下面写了一个函数来返回一个对象，用来模拟DOMTokenList API。
//get the class list of a elementfunction classList(e) { if (e.classList) return e.classList; else return new CSSClassList(e);}function CSSClassList(e) { this.e = e;}CSSClassList.prototype.contains = function (c) { //Check that c is a valid class name if (c.length === 0 || c.indexOf(" ") != -1) throw new Error("Invalid class name : ‘" + c + "‘"); var classes = this.e.className; if (!classes) return false; if (classes === c) return true; return classes.search("\\b" + c + "\\b") != -1;};CSSClassList.prototype.add = function (c) { if (this.contains(c)) return; var classes = this.e.className; if (classes && classes[classes.length-1] != " ") { c = " " + c; } this.e.className += c;}CSSClassList.prototype.remove = function (c) { if (c.length === 0 || c.indexOf(" ") != -1) throw new Error("Invalid class name: ‘" + c + "‘"); var pattern = new RegExp("\\b" + c + "\\b\\s*", "g"); this.e.className = this.e.className.replace(pattern, "");}CSSClassList.prototype.toggle = function (c) { if (c.contains(c)) { this.remove(c); return false; } else { this.add(c); return true; }}CSSClassList.prototype.toString = function (c) { return this.e.className;}CSSClassList.prototype.toArray = function (c) { return this.e.className.match(/\b\w+\b/g) || [];}
5. 操作样式表
未完待续。。。