一.網頁換膚，樣式自備。

1.window.onload=function(){
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oLink = document.getElementById('link1');

       //直接改變link的href屬性。

        oBtn1.onclick=function(){
            oLink.href="css1.css";
        }

        oBtn2.onclick=function(){
            oLink.href="css2.css";
        }
    }

二.滑鼠移到頭像上獲取個人資訊

1.封裝getByClass方法

oPrent父元素的ID，oClass為要獲取的類名

function getByClass(oPrent,oClass){
    //獲取父元素下所有的元素
    var aEle = oPrent.getElementsByTagName('*');
    var i    = 0;

    //定義一個空陣列
 var aResult = [];

    for(i=0;i<aEle.length;i++)
    {
        //遍歷所有的元素

        if(aEle[i].className==oClass){
            if(oClass=='photo_content')
            {

                //push()向陣列末端新增一個元素
                aResult.push(aEle[i].getElementsByTagName('img')[0])

            }
            else {

                //push()向陣列末端新增一個元素
                aResult.push(aEle[i]);

            }
        }
    }
    return aResult;
}

window.onload=function ()
{
    //後去父元素ID
    var oMessage = document.getElementById('message');

    //通過getByClass方法獲取所有類名為user_info元素。
    var aUser_info = getByClass(oMessage,'user_info');

    //通過getByClass方法獲取所有類名為photo_content元素下的img元素。
    var aImg = getByClass(oMessage,'photo_content');

    //遍歷aImg和aUser_info裡所有的元素
      for (var i = 0; i < aImg.length; i++) {

          aImg[i].index = i;//設定當前元素下標、

          //為當前元素新增滑鼠移入事件
          aImg[i].onmouseover=function(){

          //為當前元素設定display屬性，顯示當前樣式

            aUser_info[this.index].style.display='block';

          }

           aUser_info[i].index = i;//設定當前元素下標

          //為當前元素設定display屬性，顯示當前樣式

          aUser_info[i].onmouseover=function(){

            aUser_info[this.index].style.display='block';

          }
          //為當前元素設定display屬性，隱藏當前樣式

          aUser_info[i].onmouseout = function(){

            aUser_info[this.index].style.display='none';

          }
          
      }
}

三.播放列表

<script type="text/javascript">

        window.onload=function(){

            var oWrap = document.getElementById('wrap');

            //獲取父元素下第一個h2標籤的元素

            var oUp      = oWrap.getElementsByTagName('h2')[0];

               //獲取父元素下第一個ul標籤的元素

            var oUl      = oWrap.getElementsByTagName('ul')[0];

            oWrap.onclick=function(){
                if (oUl.style.display=='none') {
                    oUl.style.display='block';
                    oUp.style.className='up';
                }
                else
                {
                    oUp.style.className='down';
                    oUl.style.display='none';
                }
            }
        }