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元素” >“外部樣式文件”，但對(duì)于樣式文件中的多個(gè)相同樣式的優(yōu)先級(jí)怎樣排列，沒有詳細(xì)說明。經(jīng)過測試和繼續(xù)搜索，得知優(yōu)先級(jí)如下排列：

1. 樣式表的元素選擇器選擇越，則其中的樣式優(yōu)先級(jí)越高：

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

所以上例中，#navigator的樣式優(yōu)先級(jí)大于.current_block的優(yōu)先級(jí)，及時(shí).current_block是添加的，也不起作用。

2. 對(duì)于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優(yōu)先級(jí)越高

注意，這里是樣式表文件中越靠后的優(yōu)先級(jí)越高，而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后：

Css代碼 

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

而某個(gè)元素指定class時(shí)采用 class="class2 class1"這種方式指定，此時(shí)雖然class1在元素中指定時(shí)排在class2的后面，但因?yàn)樵跇邮奖砦募衏lass1處于class2前面，此時(shí)仍然是class2的優(yōu)先級(jí)更高，color的屬性為red，而非black。

3. 如果要讓某個(gè)樣式的優(yōu)先級(jí)變高，可以使用!important來指定：

Css代碼 

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

 此時(shí)class將使用black，而非red。

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

1. 將border從#navigator中拿出來，放到一個(gè)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. }  

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

• 查看滾動(dòng)條的滾動(dòng)距離 
  
  • window.pageXOffset/pageYOffset 
    
    • IE8及IE8以下不兼容
  • document.body/documentElement.scrollLeft/scrollTop 
    
    • 兼容性比較混亂，同時(shí)取兩個(gè)值相加，因?yàn)椴豢赡艽嬖趦蓚€(gè)同時(shí)有值
  • 封裝兼容性方法，求滾動(dòng)輪滾動(dòng)離getScrollOffset()

為了解決兼容性的問題，我們來封裝一個(gè)函數(shù)：

<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 
    
    • 標(biāo)準(zhǔn)模式下，任意瀏覽器都兼容
  • document.body.clientWidth/clientHeight 
    
    • 適用于怪異模式（向后兼容）下的瀏覽器
  • 封裝兼容性方法，返回瀏覽器視口尺寸getViewportOffset()

為了解決兼容性的問題，我們來封裝一個(gè)函數(shù):

<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();
  • 兼容性很好
  • 該方法返回一個(gè)對(duì)象，對(duì)象里面有l(wèi)eft，top，right，bottom等屬性。left和top代表該元素左上角的X和Y坐標(biāo)，right和bottom代表元素右下角的X和Y坐標(biāo)。
  • height和width屬性老版本IE不顯示（人為解決：分別相減一下就能得出）
  • 返回的結(jié)果并不是”實(shí)時(shí)的”

• 讓滾動(dòng)條滾動(dòng)

  • window上有三個(gè)方法
  • scroll(x,y)在x軸、y軸上滾動(dòng)的位置,scrollTo(x,y) 
    讓滾動(dòng)條滾動(dòng)到當(dāng)前位置，而不是累加距離（這兩種方法是完全一樣的）
  • scrollBy();累加滾動(dòng)距離
  • 三個(gè)方法功能類似，用法都是將x,y坐標(biāo)傳入。即實(shí)現(xiàn)讓滾動(dòng)條滾動(dòng)到當(dāng)前位置。
  • 區(qū)別：scrollBy()會(huì)在之前的數(shù)據(jù)基礎(chǔ)之上做累加。
  • eg：利用scroll()頁面定位功能。
  • eg：利用scrollBy()快速閱讀功能。

練習(xí)： 
做一個(gè)小閱讀器，會(huì)自動(dòng)翻頁。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內(nèi)容 <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; //加鎖，防止連續(xù)點(diǎn)start產(chǎn)生累加加速 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
• 對(duì)于無定位父級(jí)的元素，返回相對(duì)文檔的坐標(biāo)。對(duì)于有定位的父級(jí)元素，返回相對(duì)于最近的有定位的父級(jí)的坐標(biāo)。
• dom.offsetParent
• 返回最近的有定位的父級(jí)，如無，返回body,body.offsetParent返回null
• eg：求元素相對(duì)于文檔的坐標(biāo)getElementPosition
• 藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。