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

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

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

1.一个Demo

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

（1）HTML部分

这是一个表格        When        Where        9月9日            北京路25号人民广场        10月9日            南京路28号人民博物馆        11月9日            上海路20号人民艺术中心

（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 

当然要在文档加载完成后执行这个函数，所以老熟人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 ～～～欢迎留言评论拍砖交流

exampl    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;    }    这是一个表格            When            Where            9月9日                北京路25号人民广场            10月9日                南京路28号人民博物馆            11月9日                上海路20号人民艺术中心    function highlightRows(){        if(!document.getElementsByTagName){            return false;        }        var trlist = document.getElementsByTagName("tr");        for(var i = 0; i 

关键字：JavaScript, css

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！