王雨的JavaScript练习04---DOM操作CSS

我现在觉得用DOM操作CSS没什么大用处，CSS3已经够强大了。不过还是练习一下，多敲敲代码准没错的！

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/format.css" />
    <script src="js/addLoadEvent.js"></script>
    <script src="js/stripeTables.js"></script>
    <script src="js/displayAbbreviations.js"></script>
    <script src="js/highlightRows.js"></script>
</head>
<body>
<table>
    <caption>Itinerary</caption>
    <thead>
    <tr>
        <th>When</th>
        <th>Where</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>June 9th</td>
        <td>Portland, <abbr title="Oregon">OR</abbr></td>
    </tr>
    <tr>
        <td>June 10th</td>
        <td>Seattle, <abbr title="Washington">WA</abbr></td>
    </tr>
    <tr>
        <td>June 12th</td>
        <td>Sacramento, <abbr title="California">CA</abbr></td>
    </tr>
    </tbody>
</table>
</body>
</html>

css：

body{
    font-family: "Helvetica","Arial",sans-serif;
    background-color: #fff;
    color: #000;
}
table{
    margin: auto;
    border: 1px solid #699;
}
caption{
    margin: auto;
    padding: .2em;
    font-size: 1.2em;
    font-weight: bold;
}
th{
    font-weight: normal;
    font-style: italic;
    text-align: left;
    border: 1px dotted #699;
    background-color: #9cc;
    color: #000;
}
th,td{
    width: 10em;
    padding: .5em;
}
.odd{
    background-color: #ffc;
}

js：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function displayAbbreviations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //获取所有缩略词
    var abbreviations = document.getElementsByTagName("abbr");
    if(abbreviations.length < 1) return false;
    //定义一个数组，以便以后存放缩略词和解释
    var defs = new Array();
    //遍历缩略词对象，获取缩略词和解释
    for (i=0; i<abbreviations.length; i++){
        var current_abbr = abbreviations[i];
        if(current_abbr.childNodes.length < 1) continue;
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        //把缩略词和解释存入数组，缩略词key作为下标
        defs[key] = definition;
    }
    //创建一个dl，以便以后放表格
    var dlist = document.createElement("dl");
    //遍历对象
    for (key in defs){4
        var definition = defs[key];
        //创建标题，把缩略词添加到dt里面
        var dtitle =document.createElement("dt");
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        //创建描述，把解释添加到dd里面
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        //把dd dt添加到dl也就是dlist中
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    if (dlist.childNodes.length < 1) return false;
    //创建一个h2标题
    var header = document.createElement("h2");
    var header_text = document.createTextNode("abbreviations");
    header.appendChild(header_text);
    //把h2标题添加到页面
    document.body.appendChild(header);
    //把dl添加到页面
    document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

// document.body.appendChild(element)方法把元素添加到html文档最后

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);

function stripeTables() {
    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){
                addClass(rows[j],"odd");
                odd = false;
            } else {
                odd =true;
            }
        }
    }
}

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

addLoadEvent(stripeTables);

 

posted @ 2017-05-15 22:07  王雨的博客  阅读(154)  评论(0)  编辑  收藏  举报