CSS操作

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

1. 使用JavaScript操作Inline Styles

所有的文档元素都有style属性，我们可以通过直接操作style属性来修改相关元素的样式。

需要注意的是style属性的值并不是一个string对象，而是一个CSSStyleDeclaration对象。

我们可以通过如下方式设置style属性的值。

 

e.style.fontSize = "24pt"; //由于JavaScript变量不允许使用连字符，所以设置相关属性时需要将该属性名的连字符移除，并且大写属性名非首单词首字母。font-size ==> fontSize。

e.style.color = "blue";<br>e.style.cssFloat = "right" //由于float是JavaScript的关键字，所以css float属性加了css前缀

有时，我们想获得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);

        }

    }

}

3. 查询元素的Computed Styles

我们通过style属性得到的是元素的内联样式，并不是该元素的实际应用的样式。

元素实际的样式是由多级样式表按照指定的优先级计算出来的。我们可以通过window对象的getComputedStyle方法得到元素的实际样式。

var title = document.getElementById("sectionTitle");

var titleStyles = window.getComputedStyle(element, null);

 

该方法返回一个只读的CSSStyleDeclaration对象。并且该对象的cssText属性是undefined。

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(/w+/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);

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

5.3 创建新的样式表

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

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