《DOM编程艺术》中CSS—DOM的总结（二）

前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！

－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－

1.一个Demo

需求：创建一个表格，当鼠标hover到一行上时，改变这行中字体的样式，鼠标移走恢复原样。

（1）HTML部分

<table>
    <caption>这是一个表格</caption>
    <thead>
        <tr>
            <th>When</th>
            <th>Where</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>9月9日</th>
                <td>北京路25号人民广场</td>
        </tr>
        <tr>
            <td>10月9日</th>
                <td>南京路28号人民博物馆</td>
        </tr>
        <tr>
            <td>11月9日</th>
                <td>上海路20号人民艺术中心</td>
        </tr>
    </tbody>

（2）CSS部分

要美观，还是稍微写点样式吧

    table {
        margin: auto;
        border: 1px solid gray;
        margin-top: 30px;
    }
    
    caption {
        margin: auto;
        font-weight: bold;
    }
    
    th {
        border: 1px dotted gray;
        background-color: gainsboro;
    }
    
    th,
    td {
        width: 10em;
        padding: 0.5em;
    }

（3）js代码部分

思路就是：获取到所有的tr，然后遍历tr，并对tr做CSS样式修改。
－首先判断浏览器支不支持getElementsByTag
－其次获取所有的tr标签
－然后遍历，取出每一个tr标签，添加onmouseover事件和onmouseout事件，后面用匿名函数执行样式更换操作。

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

当然要在文档加载完成后执行这个函数，所以老熟人addLoadEvent函数又再次出现。

    function addLoadEvent(func){
        //把现有的window.onload存入变量oldonload
        var oldonload = window.onload;
        if(typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }

最后在文档加载完成后，添加这个函数到addLoadEvent函数。

addLoadEvent(highlightRows);

2.完整源代码

老规矩了，上完整源代码，你可以复制到本地看看效果，have fun ～～～欢迎留言评论拍砖交流

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>exampl</title>
    <style>
        table {
            margin: auto;
            border: 1px solid gray;
            margin-top: 30px;
        }
        
        caption {
            margin: auto;
            font-weight: bold;
        }
        
        th {
            border: 1px dotted gray;
            background-color: gainsboro;
        }
        
        th,
        td {
            width: 10em;
            padding: 0.5em;
        }
    </style>
</head>

<body>
    <table>
        <caption>这是一个表格</caption>
        <thead>
            <tr>
                <th>When</th>
                <th>Where</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>9月9日</th>
                    <td>北京路25号人民广场</td>
            </tr>
            <tr>
                <td>10月9日</th>
                    <td>南京路28号人民博物馆</td>
            </tr>
            <tr>
                <td>11月9日</th>
                    <td>上海路20号人民艺术中心</td>
            </tr>
        </tbody>
    </table>


    <!--js代码-->
    <script>
        function highlightRows(){
            if(!document.getElementsByTagName){
                return false;
            }
            var trlist = document.getElementsByTagName("tr");
            for(var i = 0; i < trlist.length; i++){
                trlist[i].onmouseover = function(){
                    this.style.fontWeight = "bolder";
                    this.style.color = "red";
                }
                trlist[i].onmouseout = function(){
                    this.style.fontWeight = "normal";
                    this.style.color = "black";
                }
            }
        }

        function addLoadEvent(func){
            //把现有的window.onload存入变量oldonload
            var oldonload = window.onload;
            if(typeof window.onload != 'function'){
                window.onload = func;
            }else{
                window.onload = function(){
                    oldonload();
                    func();
                }
            }
        }

        addLoadEvent(highlightRows);
    </script>
</body>

</html>

《DOM编程艺术》中CSS—DOM的总结（二）

1.一个Demo

（1）HTML部分

（2）CSS部分

（3）js代码部分

2.完整源代码

yangdepp

引用和评论

补全一段jQuery代码

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具