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 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的帮助。

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 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) || [];
}

5. 操作样式表

我们可以通过document.styleSheets得到与文档关联的样式表，样式表对象为CSSStyleSheet类型。

5.1 样式表的启用与禁用

<style>元素，<link>元素，CSSStyleSheet对象都包含有disabled属性，我们可以通过设置该值来启用与禁用相关CSS

5.2 样式表的查询，插入与删除操作

CSSStyleSheet对象包含有一个cssRules属性(IE下为rules)，该属性为一个数组，包含了该样式表中的规则。样式表中的规则为CSSRule类型。

CSSRule类型包含有两个属性，一个是selectorText，指定了规则的选择器。一个是类型为CSSStyleDeclaration的style属性。

我们可以直接操作style属性来修改该规则的样式。

CSSStyleSheet对象包含有一组操作规则的API

inserRule用于添加规则，接受两个参数，一个为规则文本，一个为插入位置

document.styleSheets[0].insertRule("H1 {text-weight: bold; }", 0);

deleteRule用于删除规则，传入指定规则的位置即可

在IE下这两个API分别为addRule和removeRule，传入的规则文本被分为了两个参数，一个是selector text，一个是style text。

5.3 创建新的样式表

我们可以通过创建Style元素，然后设置其innerHtml值来创建新的样式表。

在IE8及以前，我们可以通过document.createStyleSheet来创建一个CSSStyleSheet对象，同过设置该对象的cssText属性来设置样式文本。