常見前端 瀏覽器相容問題

2021-09-11 03:12:31 字數 2940 閱讀 8058

//以下均可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.οnclick=function(ev)

document.οnclick=function()

document.οnclick=function(ev)

複製**

dom節點相關的問題,我直接封裝了函式,以便隨時可以拿來使用:

複製**

//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所有元素;

}

複製**

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

複製**

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

function getstyle(object,ocss) else

}複製**

設定監聽事件:

複製**

//設定監聽事件

function addevent(obj,type,fn) else;

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

}複製**

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

複製**

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

function offsettl(obj)

return;

}複製**

阻止事件傳播:

複製**

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

document.οnclick=function(e)else

}複製**

阻止預設事件:

複製**

//js阻止預設事件

document.οnclick=function(e)else

}複製**

關於event事件中的target:

複製**

//關於event事件中的target

document.οnmοuseοver=function(e)

複製**

滑鼠滾輪滾動事件:

複製**

//滑鼠滾輪事件

//火狐中的滾輪事件

document.addeventlistener(「dommousescroll」,function(event),false)

//非火狐中的滾輪事件

document.onmousewheel=function(event)

複製**

節點載入:

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

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

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

前端瀏覽器相容問題

一 ie和谷歌相容性問題 在頭標籤裡面加 此方法可以解決大部分的相容性問題 這串 的意思是強制ie使用chrome frame去渲染 為防止此標籤失效,在此標籤之前最好不要寫任何標籤 二 各種標籤之間的magin和padding不一致 在乙個頁面沒有任何設定,只有原始的幾個標籤的情況下,各種標籤之間...

常見瀏覽器相容問題

1 針對ie5以下和 ie5 firefox 引入檔案區別 import url newstyle.css 後者可以識別,前者不能識別 2 針對ie和firefox指定裝置型別選項 import url newstyle.css screen 後者可以識別,前者不能識別 3 注釋區別 content...

常見瀏覽器相容問題

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...