2017/04/24

CSS-DOM
style属性
1.获取样式:element.style.fontFamily
不管CSS样式属性的名字里有多少个连字符,DOM一律采用驼峰命名法来表示他们
通过style属性获取样式有很大的局限性,它只能返回内嵌样式
2.设置样式: element.style.property = “value”
3.要知道何时该用DOM脚本设置样式
根据元素在节点树里的位置来设置样式

function styleHeaderSibling() {
    if (!document.getElementsByTagName) {
        return false;
    }
    var headers = document.getElementsByTagName("h1");
    var elem;
    for (var i = 0; i < headers.length; i++){
        elem = getNextElement(headers[i].nextSibling);
        elem.style.fontWeight = "bold";
        elem.style.fontSize = "1.2em";
    }
}
function getNextElement(node) {
    if (node.nodeType == 1) {
        return node;
    }
    if (node.nextSibling) {
        return getNextElement(node.nextSibling);
    }
    return null;
}
addLoadEvent(styleHeaderSibling);

根据某种条件反复设置某种样式

function stripleTables() {
    if (!document.getElementsByTagName) {
        return false
    }
    var tables = document.getElementsByTagName("table");
    var odd, rows;
    for (var i = 0; i < tables.length; i++) {
        odd = false;
        rows = tables[i].getElementsByTagName("tr");
        for (var j = 0; j < rows.length; j++) {
            if (odd == true) {
                rows[j].style.backgroundColor = "#ffc";
                odd = false;
            } else {
                odd = true;
            }
        }
    }
}
addLoadEvent(stripleTables);

响应事件

function highlightRows() {
    if (!document.getElementsByTagName) {
        return false;
    }
    var rows = document.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onmouseover = function () {
            this.style.fontWeight = "bold";
        }
        rows[i].onmouseout = function () {
            this.style.fontWeight = "normal";
        }

    }
}
addLoadEvent(highlightRows);

4.className属性
1.检查className属性的是否为null
2.如果是,把新的class设置值直接赋值给className属性
3.如果不是,把一个空格和新的class设置值追加到className属性上去

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

5.对函数进行抽象

function styleElementSiblings(tag,theclass) {
    if (!document.getElementsByTagName) {
        return false;
    }
    var elems = document.getElementsByTagName(tag);
    var elem;
    for (var i = 0; i < elems.length; i++){
        elem = getNextElement(elems[i].nextSibling);
        // elem.style.fontWeight = "bold";
        // elem.style.fontSize = "1.2em";
        // elem.className = "intro";
        addClass(elem,theclass);
    }
}
addLoadEvent(function () {
    styleElementSiblings("h1","intro");
});