瀏覽器兼容性以及寫法

瀏覽器的兼容性以及寫法

第一個 清除浮動的兼容性

第二個 透明度的兼容寫法

第三個 js獲取節點的兼容寫法

第四個 獲取計算機計算的全部屬性

第五個 獲取元素子節點childNodes 這個屬性有兼容性

第六個 動態建立節點，元素沒有子節點，Ie低版本會讀取不到，而標準瀏覽器會。

第七個 獲取瀏覽器可見區的高度 寬度 body

第八個 解決Css3中的兼容性

第九個 Event的兼容性 

第十個 事件綁定的兼容性寫法

第十一個 Mouseevent有兼容性

第十二個 Event對象的兼容性

第十三個 事件源（點擊那個元素，那個元素就是事件源）兼容性

第十四個 阻止事件冒泡兼容性

第十五個 阻止事件默認行爲兼容性

 

清楚浮動在低版本瀏覽器不行，須要處理兼容性加一個 .clearfix{ *zoom：1；}

爲何加了  .clearfix{*zoom：1;} 它是專門針對Ie 6/7低版本的，若是沒有加   .clearfix{*zoom：1；}若是是ie 6/7你給這個元素加了clearfix不起做用，只有加它再給這個父級加  clearfix 纔有效果。它是解決iE清除浮動在低版本瀏覽器兼容性

第二個 透明度的兼容寫法

rgb 和rgba 和oopacity

rgb是顏色的表達方法值是 0-255

如 background：rgb（12，13，14）

opacity 表示透明度值是0-1；

rgba（）人是red0-255  g是green 值是0-255 b是blue值是0-255 a是opacity值是 0-1

可是iE低版本不支持。、

加一個樣式 它是iE低版本透明的兼容寫法

 filter：alpha(opacity=50)

rgb 和opacity與rgba的區別?

前者內容也跟着透明，後者內容不跟着透明

第三個 js獲取節點的兼容寫法

Document.body 獲取的是文檔中的body標籤

Document.documentElement 獲取的是文檔中的根節點

Document.body.clentWidth

Document.documentElement.ctentWidth

這是谷歌的

兩者獲取width的值不同差16px，怎樣讓他們同樣。

 

 

iE瀏覽器低版本不支持 document.documentElement

兼容性寫法

var w=document.documentElement.clientwidth||document.body.clientwidth

獲取瀏覽器的可見長度

 如何在js中獲取 css樣式

  window.getcomputedstyle()獲取通過計算機的全部屬性，

  就是隻要渲染到頁面的都是通過計算的。

　get.computedstyle()第一個參數是當前元素，第二個通常咱們寫null

　而且這個方法是隻讀的，

　Ie6-8 不支持這個用法 Ie的是用 currentStyle

　　

能夠用 currentStyle

總結

　　js解決兼容的方法

　　　　1.用||

　　var dd=document.documentElement.clienWidth||document.body.clicentWidth

　　2.if()esle{}　　

　　

　　if(window.getComputedStyle){

    　　csss=window.getComputedStyle(aa,null)

　　}else{

   　　 csss=aa.currentStyle

　　}

　　console.log(csss)

　　第五個 獲取元素子節點childNodes 這個屬性有兼容性

　　元素.childNodes 這個屬性有兼容性 標準瀏覽器會獲取到文本節點。

　　而低版本瀏覽器不會。索引建議使用  children 這個屬性

　　

　　　　左邊是Ie低版本瀏覽器 右邊是谷歌標準瀏覽器

　　使用children以後  統一文本節點

　　　　兼容寫法：

　　　　　　　　var list=document.getElementById("list")

　　　　　　var fist=list.firstElementChild||list.firstChild

　　　　　　　　

　　　　　　　第六個 動態建立節點，元素沒有子節點，Ie低版本會讀取不

到，而標準瀏覽器會。

　　

　　　　若是list沒有子節點ie低版本會讀取不到，而標準瀏覽器會

　　　　

　　　　

　　兼容性。

　　　　　　元素沒有子節點，ie低版本會讀取不到，而標準瀏覽器會。

　　　　　　由於標準瀏覽器會把文本節點看成子節點，而ie6-8不會。

 

第七個 獲取瀏覽器可見區的高度 寬度 body

 

兼容性寫法

Var w=document.documentElement.clientWidth||document.body.clientWidth

獲取瀏覽器可見區的寬度

獲取瀏覽器可見區的高度

Var w=document.documentElement.clientHeight||document.body.clientHeight

 瀏覽器滾動條捲走的高度

Document.body.scrollTop||document.documentElement.scrollTop 

 

 第八個  解決Css3中的兼容性

 

 

 

          chrome（谷歌）的前綴-webkit-

 

          firefox（火狐）的前綴-moz-

 

          ie的前綴 -ms-

 

          poera（歐朋）的前綴-o-

 

　　   國內的瀏覽器的內核都是谷歌

第九個 Event的兼容性 

在chrome（谷歌瀏覽器）event是undefined在ie下是null 火狐下會報錯

 

第十個 事件綁定的兼容性寫法

標準瀏覽器用： div.addEventListener()

ie低版本用：div.attachEvent()

 

第十一個 Mouseevent有兼容性

標準瀏覽器能夠直接讀取，但ie不行

解決辦法：

 

 第十二個 Event對象的兼容性

clientX和clientY 是鼠標到瀏覽器窗口左上角的距離座標。

pageX和pageY是鼠標到頁面左上角的距離座標，可是ie低版本沒有。

在ie下怎麼算pagerY的值加上scrolTop：clientY+scrollTop

 

第十三個 事件源（點擊那個元素，那個元素就是事件源）兼容性

標準瀏覽器的事件源是 ev.target

在ie6-8沒有這個屬性 可是ie有ev.srcElement

 

 第十四個 阻止事件冒泡兼容性

1.event.cancelBubble=true（如今ie瀏覽器版本升級了，用這一個就好了）

2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true（老版ie瀏覽器兼容性寫法）

 第十五個 阻止事件默認行爲兼容性

好比 a的href

href爲空 會自動刷新頁面

href爲#   會錨點跳轉

href爲 javascript:; 阻止默認行爲的發生

兼容性寫法：

Event.preventDefault?Event.preventDefault():event.returnValue=false

 

 　　　　做者：晉飛翔

　　  QQ(微信同步)318080891