国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《DOM編程藝術》中CSS—DOM的總結（二）

amc / 2787人閱讀

摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。

前言：接上篇，本篇有兩個內容：一個是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號人民藝術中心

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111292.html

相關文章

  • 《DOM編程藝術》中CSS—DOM的總結（二）

    摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。 前言：接上篇，本篇有兩個內容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始！！！ －－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....

    yangrd 評論0 收藏0

  • 《DOM編程藝術》中CSS—DOM的總結（三）

    摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術》中CSS—DOM的總結（三）

    摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • 《DOM編程藝術》中CSS—DOM的總結（一）

    摘要：前言前面是純總結，后面實現了一個用改變樣式的。開始元素節點的屬性文檔中每個元素節點都有一個屬性，屬性包含著元素的樣式，查詢這個這個屬性將會返回一個對象，節點對應的樣式都存放在這個屬性里。 前言：前面是純總結，后面實現了一個用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節點的style屬性 HTML文檔中...

    sourcenode 評論0 收藏0

  • 《DOM編程藝術》中CSS—DOM的總結（一）

    摘要：前言前面是純總結，后面實現了一個用改變樣式的。開始元素節點的屬性文檔中每個元素節點都有一個屬性，屬性包含著元素的樣式，查詢這個這個屬性將會返回一個對象，節點對應的樣式都存放在這個屬性里。 前言：前面是純總結，后面實現了一個用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節點的style屬性 HTML文檔中...

    Bryan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<