Css代碼 

1. #navigator {  
2.     height: 100%;  
3.     width: 200;  
4.     position: absolute;  
5.     left: 0;  
6.     border: solid 2 #EEE;  
7. }  
8.   
9. .current_block {  
10.     border: solid 2 #AE0;  
11. }  

查找一些教材中（w3schools等），只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優先級怎樣排列，沒有詳細說明。經過測試和繼續搜索，得知優先級如下排列：

1. 樣式表的元素選擇器選擇越，則其中的樣式優先級越高：

id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式

所以上例中，#navigator的樣式優先級大于.current_block的優先級，及時.current_block是添加的，也不起作用。

2. 對于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優先級越高

注意，這里是樣式表文件中越靠后的優先級越高，而不是在元素class出現的順序。比如.class2 在樣式表中出現在.class1之后：

Css代碼 

1. .class1 {  
2.     color: black;  
3. }  
4.   
5. .class2 {  
6.     color: red;  
7. }  

而某個元素指定class時采用 class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優先級更高，color的屬性為red，而非black。

3. 如果要讓某個樣式的優先級變高，可以使用!important來指定：

Css代碼 

1. .class1 {  
2.     color: black !important;  
3. }  
4.   
5. .class2 {  
6.     color: red;  
7. }  

 此時class將使用black，而非red。

對于一開始遇到的問題，有兩種解決方案：

1. 將border從#navigator中拿出來，放到一個class .block中，而.block放到.current_block之前：

Css代碼 

1. #navigator {  
2.     height: 100%;  
3.     width: 200;  
4.     position: absolute;  
5.     left: 0;  
6. }  
7.   
8. .block {  
9.     border: solid 2 #EEE;  
10. }  
11.   
12. .current_block {  
13.     border: solid 2 #AE0;  
14. }  

 需要莫仁為#navigator元素指定class="block"

2. 使用!important:

Css代碼 

1. #navigator {  
2.     height: 100%;  
3.     width: 200;  
4.     position: absolute;  
5.     left: 0;  
6.     border: solid 2 #EEE;  
7. }  
8.   
9. .current_block {  
10.     border: solid 2 #AE0 !important;  
11. }  

 此時無需作任何其他改動即可生效?？梢姷诙N方案更簡單一些。 

• 查看滾動條的滾動距離 
  
  • window.pageXOffset/pageYOffset 
    
    • IE8及IE8以下不兼容
  • document.body/documentElement.scrollLeft/scrollTop 
    
    • 兼容性比較混亂，同時取兩個值相加，因為不可能存在兩個同時有值
  • 封裝兼容性方法，求滾動輪滾動離getScrollOffset()

為了解決兼容性的問題，我們來封裝一個函數：

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
        else{
            return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

    

• 查看視口的尺寸 
  
  • window.innerWidth/innerHeight 
    
    • IE及IE8以下不兼容
  • document.documentElement.clientWidth/clientHeight 
    
    • 標準模式下，任意瀏覽器都兼容
  • document.body.clientWidth/clientHeight 
    
    • 適用于怪異模式（向后兼容）下的瀏覽器
  • 封裝兼容性方法，返回瀏覽器視口尺寸getViewportOffset()

為了解決兼容性的問題，我們來封裝一個函數:

<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{ if(document.compatMode ==="BackCompat") { return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{ return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

    

• 查看元素的幾何尺寸

  • domEle.getBoundingClientRect();
  • 兼容性很好
  • 該方法返回一個對象，對象里面有left，top，right，bottom等屬性。left和top代表該元素左上角的X和Y坐標，right和bottom代表元素右下角的X和Y坐標。
  • height和width屬性老版本IE不顯示（人為解決：分別相減一下就能得出）
  • 返回的結果并不是”實時的”

• 讓滾動條滾動

  • window上有三個方法
  • scroll(x,y)在x軸、y軸上滾動的位置,scrollTo(x,y) 
    讓滾動條滾動到當前位置，而不是累加距離（這兩種方法是完全一樣的）
  • scrollBy();累加滾動距離
  • 三個方法功能類似，用法都是將x,y坐標傳入。即實現讓滾動條滾動到當前位置。
  • 區別：scrollBy()會在之前的數據基礎之上做累加。
  • eg：利用scroll()頁面定位功能。
  • eg：利用scrollBy()快速閱讀功能。

練習： 
做一個小閱讀器，會自動翻頁。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加鎖，防止連續點start產生累加加速 start.onclick = function() { if(key) {
            timer = setInterval(function() { window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() { clearInterval(timer);
        key = true;
    } </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

    

• 查看元素的尺寸（視覺上的） 
  
  • dom.offsetWidth,dom.offsetHeight
• 查看元素的位置 
  
• dom.offsetLeft,dom.offsetTop
• 對于無定位父級的元素，返回相對文檔的坐標。對于有定位的父級元素，返回相對于最近的有定位的父級的坐標。
• dom.offsetParent
• 返回最近的有定位的父級，如無，返回body,body.offsetParent返回null
• eg：求元素相對于文檔的坐標getElementPosition
• 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。