关于CSS的介绍不是本文的内容范围，本文主要介绍如何使用JavaScript操作CSS。
所有的文档元素都有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
一个经常使用JavaScript操作CSS的场景就是制作一些动画效果。这可以通过定时器动态修改一些css样式的值来实现。
以下为一个产生震动效果的JavaScript函数。
// shake the specified element
function 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的帮助。
我们通过style属性得到的是元素的内联样式，并不是该元素的实际应用的样式。
元素实际的样式是由多级样式表按照指定的优先级计算出来的。我们可以通过window对象的getComputedStyle方法得到元素的实际样式。
var title = document.getElementById("sectionTitle");
var titleStyles = window.getComputedStyle(element, null);
该方法接受两个参数，一个是元素对象，另一个用于传入CSS伪类(:first-line...)，通常出入null值或者空字符串。
该方法返回一个只读的CSSStyleDeclaration对象。并且该对象的cssText属性是undefined。
IE8以前包括IE8并不支持该函数，可以通过元素的currentStyle部分代替该方法，但是二者有些许不同，这里不再详述。
通过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 element
function 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) || [];
}
未完待续。。。
JavaScript 操作CSS,布布扣,bubuko.com
原文：http://www.cnblogs.com/xiaobaicai/p/3897805.html