JS中常遇到的瀏覽器相容問題和解決方法

2022-05-13 06:07:38 字數 2784 閱讀 3006

常遇到的關於瀏覽器的寬高問題:

//以下均可console.log()實驗

var winw=document.body.clientwidth||document.docuemntelement.clientwidth;//網頁可見區域寬

var winh=document.body.clientheight||document.docuemntelement.clientheight;//網頁可見區域寬

//以上為不包括邊框的寬高,如果是offsetwidth或者offsetheight的話包括邊框

var winww=document.body.scrollwidth||document.docuemntelement.scrollwidth;//整個網頁的寬

var winhh=document.body.scrollheight||document.docuemntelement.scrollheight;//整個網頁的高

var scrollheight=document.body.scrolltop||document.docuemntelement.scrolltop;//網頁被卷去的高

var scrollleft=document.body.scrollleft||document.docuemntelement.scrollleft;//網頁左捲的距離

var screenh=window.screen.height;//螢幕解析度的高

var screenw=window.screen.width;//螢幕解析度的寬

var screenx=window.screenleft;//瀏覽器視窗相對於螢幕的x座標(除了firefox)

var screenxx=window.screenx;//firefox相對於螢幕的x座標

var screeny=window.screentop;//瀏覽器視窗相對於螢幕的y座標(除了firefox)

var screenyy=window.screeny;//firefox相對於螢幕的y座標

event事件問題:

//event事件問題

document.onclick=function(ev)

document.onclick=function()

document.onclick=function(ev)

//dom節點相關,主要相容ie 6 7 8

function nextnode(obj) else;

}function prenode(obj) else;

}function firstnode(obj) else;

}function lastnode(obj) else;

}

document.getelementsbyclassname問題:

//通過類名獲取元素

document.getelementsbyclassname('');//ie 6 7 8不支援;

//這裡可以定義乙個函式來解決相容問題,當然別在這給我提jquery...

//第乙個為全域性獲取類名,第二個為區域性獲取類名

function byclass1(oclass);

};return arr;//注意返回的也是陣列,包含你傳入的class所有元素;

} function byclass2(parentid,oclass);

};return arr;//注意返回的也是陣列,包含你傳入的class所有元素;

}

獲取元素的非行間樣式值:

//獲取元素的非行間樣式值

functiongetstyle(object,ocss) else

}

設定監聽事件:

//設定監聽事件

function addevent(obj,type,fn) else;

}function removeevent(obj,type,fn) else;

}

元素到瀏覽器邊緣的距離:

//在這裡加個元素到瀏覽器邊緣的距離,很實用

function offsettl(obj)

return;

}

阻止事件傳播:

//js阻止事件傳播,這裡使用click事件為例

document.onclick=function(e)else

}

阻止預設事件:

//js阻止預設事件

document.onclick=function(e)else

}

關於event事件中的target:

//關於event事件中的target

document.onmouseover=function(e)

滑鼠滾輪滾動事件:

//滑鼠滾輪事件

//火狐中的滾輪事件

document.addeventlistener("dommousescroll",function(event),false)

//非火狐中的滾輪事件

document.onmousewheel=function(event)

節點載入:

//火狐下特有的節點載入事件,就是節點載入完才執行,和onload不同

//感覺用到的不多,直接把js**放在頁面結構後面一樣能實現。。

document.addeventlistener('domcontentloaded',function ( ){},false);//dom載入完成。好像除ie6-8都可以.

**

JS中常遇到的瀏覽器相容問題和解決方法

常遇到的關於瀏覽器的寬高問題 以下均可console.log實驗 var winw document.body.clientwidth document.docuemntelement.clientwidth 網頁可見區域寬 var winh document.body.clientheight d...

JS中常遇到的瀏覽器相容問題和解決方法

以下均可console.log 實驗var winw document.body.clientwidth document.docuemntelement.clientwidth 網頁可見區域寬 var winh document.body.clientheight document.docuemn...

瀏覽器相容問題

我經常看到一些人提問說網頁錯位,和在火狐裡面看上去網頁是好的,在ie在錯位了.在web 下html css裡全看一些關於這些問題.還有有ul li什麼調整不好的.等等 全可以用css hack 解決的.解決方法 用positon relative 然後 top 0px left 0px 上面的top...