王雨的JavaScript練習04---DOM操做CSS

時間 2019-12-06

標籤 javascript 練習 dom css 欄目 JavaScript 简体版

原文原文鏈接

我如今以爲用DOM操做CSS沒什麼大用處，CSS3已經夠強大了。不過仍是練習一下，多敲敲代碼準沒錯的！css

html：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：node

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。