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. }  

 此时无需作任何其他改动即可生效。可见第二种方案更简单一些。 

• 查看滚动条的滚动距离 
  
  • 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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。