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

amc 发布于2019-08-29 10:54 / 2785人阅读

摘要：部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观，还是稍微写点样式吧代码部分思路就是获取到所有的，然后遍历，并对做样式修改。

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

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

1.一个Demo

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

（1）HTML部分

（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 ～～～欢迎留言评论拍砖交流




    
    exampl
    



    

    这是一个表格
    
        
            When
            Where
        
    

    
        
            9月9日
                北京路25号人民广场
        
        
            10月9日
                南京路28号人民博物馆
        
        
            11月9日
                上海路20号人民艺术中心
        
    














        这是一个表格
        
            
                When
                Where
            
        

        
            
                9月9日
                    北京路25号人民广场
            
            
                10月9日
                    南京路28号人民博物馆
            
            
                11月9日
                    上海路20号人民艺术中心

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111292.html

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

摘要：部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观，还是稍微写点样式吧代码部分思路就是获取到所有的，然后遍历，并对做样式修改。前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－ 1....

yangrd 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

王岩威 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

liukai90 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（一）

摘要：前言前面是纯总结，后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性，属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个属性里。前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素节点的style属性 HTML文档中...

sourcenode 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（一）

摘要：前言前面是纯总结，后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性，属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个属性里。前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素节点的style属性 HTML文档中...

Bryan 2019-08-19 18:32 评论0 收藏0