1. 返回檢測屏幕寬度(可視區域)

 1  function client() {
 2    if(window.innerWidth != null)  // ie9 +  最新瀏覽器
 3    {
 4       return {
 5          width: window.innerWidth,
 6          height: window.innerHeight
 7       }
 8    }
 9    else if(document.compatMode === "CSS1Compat")  // 標準瀏覽器
10    {
11       return {
12          width: document.documentElement.clientWidth,
13          height: document.documentElement.clientHeight
14       }
15    }
16    return {   // 怪異瀏覽器
17       width: document.body.clientWidth,
18       height: document.body.clientHeight
19    }
20 }

2. 阻止冒泡 

 w3c的方法是event.stopPropagation()        proPagation  傳播  傳遞

 IE則是使用event.cancelBubble = true       bubble   冒泡  泡泡      cancel 取消

 相容的寫法：

JQuery 阻止時間冒泡   event.stopPropagation();//已經相容

                          evevt.preventDefault();//阻止瀏覽器預設行為

1 2  if(event && event.stopPropagation)
2 3          {
3 4              event.stopPropagation();  //  w3c 標準
4 5          }
5 6          else
6 7          {
7 8              event.cancelBubble = true;  // ie 678  ie瀏覽器
8 9   }

獲取你點擊的事件源e.target==this作用類似event.stopPropagation();阻止冒泡

1 10  $(".box").on("click",function(e){
2     if(e.target==this){
3         alert("父盒子被點擊");
4     }
5 
6 });

3.獲取用戶選擇的內容

window.getSelection()     標準瀏覽器

document.selection.createRange().text;      ie 獲得選擇的文字

相容性的寫法：

1 if(window.getSelection)
2 {
3     txt = window.getSelection().toString();   // 轉換為字元串
4 }
5 else
6 {
7     txt = document.selection.createRange().text;   // ie 的寫法
8 }

4. 得到css 樣式  

我們想要獲得css 的樣式， box.style.left    box.style.backgorundColor

但是它只能得到   行內的樣式。

但是我們工作最多用的是 內嵌式 或者 外鏈式 。

怎麼辦？

   核心： 我們怎麼才能得到內嵌或者外鏈的樣式呢？  

 1.   obj.currentStyle   ie  opera  常用

外部（使用<link>）和內嵌（使用<style>）樣式表中的樣式（ie和opera）

2 .window.getComputedStyle("元素", "偽類")     w3c

兩個選項是必須的， 沒有偽類 用 null 替代

3 相容寫法 ：

    我們這個元素裡面的屬性很多， left  top  width  ===

 我們想要某個屬性， 就應該 返回改屬性，所有繼續封裝 返回當前樣式的 函數。

 1 1  var demo = document.getElementById("demo");
 2 2      function getStyle(obj,attr) {  //  誰的      哪個屬性
 3 3          if(obj.currentStyle)  // ie 等
 4 4          {
 5 5              return obj.currentStyle[attr];  
 6 6          }
 7 7          else
 8 8          {
 9 9              return window.getComputedStyle(obj,null)[attr];  // w3c 瀏覽器
10 10          }
11 11      }
12 12      console.log(getStyle(demo,"width"));