《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（二）

amc 發(fā)布于2019-08-29 10:54 / 2790人閱讀

摘要：部分這是一個(gè)表格月日北京路號(hào)人民廣場(chǎng)月日南京路號(hào)人民博物館月日上海路號(hào)人民藝術(shù)中心部分要美觀，還是稍微寫(xiě)點(diǎn)樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對(duì)做樣式修改。

前言：接上篇，本篇有兩個(gè)內(nèi)容：一個(gè)是Demo：當(dāng)鼠標(biāo)hover到表格的一行上時(shí)這行表格字體加粗。。。好了，廢話少說(shuō)，開(kāi)始！！！

－－－－－－－－－－－－－－－－－－嚴(yán)肅的分割線－－－－－－－－－－－－－－－－－－

1.一個(gè)Demo

需求：創(chuàng)建一個(gè)表格，當(dāng)鼠標(biāo)hover到一行上時(shí)，改變這行中字體的樣式，鼠標(biāo)移走恢復(fù)原樣。

（1）HTML部分

（2）CSS部分要美觀，還是稍微寫(xiě)點(diǎn)樣式吧
    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，并對(duì)tr做CSS樣式修改。
－首先判斷瀏覽器支不支持getElementsByTag
－其次獲取所有的tr標(biāo)簽
－然后遍歷，取出每一個(gè)tr標(biāo)簽，添加onmouseover事件和onmouseout事件，后面用匿名函數(shù)執(zhí)行樣式更換操作。
    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";
            }
        }
    }
當(dāng)然要在文檔加載完成后執(zhí)行這個(gè)函數(shù)，所以老熟人addLoadEvent函數(shù)又再次出現(xiàn)。
    function addLoadEvent(func){
        //把現(xiàn)有的window.onload存入變量oldonload
        var oldonload = window.onload;
        if(typeof window.onload != "function"){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }
最后在文檔加載完成后，添加這個(gè)函數(shù)到addLoadEvent函數(shù)。
addLoadEvent(highlightRows);
2.完整源代碼老規(guī)矩了，上完整源代碼，你可以復(fù)制到本地看看效果，have fun ～～～歡迎留言評(píng)論拍磚交流




    
    exampl
    



    

    這是一個(gè)表格
    
        
            When
            Where
        
    

    
        
            9月9日
                北京路25號(hào)人民廣場(chǎng)
        
        
            10月9日
                南京路28號(hào)人民博物館
        
        
            11月9日
                上海路20號(hào)人民藝術(shù)中心
        
    














        這是一個(gè)表格
        
            
                When
                Where
            
        

        
            
                9月9日
                    北京路25號(hào)人民廣場(chǎng)
            
            
                10月9日
                    南京路28號(hào)人民博物館
            
            
                11月9日
                    上海路20號(hào)人民藝術(shù)中心