//以下均可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事件問題：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//event事件問題
document.onclick=
function
(ev){
//谷歌火狐的寫法，IE9以上支持，往下不支持；
var
e=ev;
console.log(e);
}
document.onclick=
function
(){
//谷歌和IE支持，火狐不支持；
var
e=event;
console.log(e);
}
document.onclick=
function
(ev){
//兼容寫法；
var
e=ev||window.event;
var
mouseX=e.clientX;
//鼠標X軸的坐標
var
mouseY=e.clientY;
//鼠標Y軸的坐標
}
|
DOM節點相關的問題，我直接封裝了函數，以便隨時可以拿來使用：
|
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
29
|
//DOM節點相關，主要兼容IE 6 7 8
function
nextnode(obj){
//獲取下一個兄弟節點
if
(obj.nextElementSibling) {
return
obj.nextElementSibling;
}
else
{
return
obj.nextSibling;
};
}
function
prenode(obj){
//獲取上一個兄弟節點
if
(obj.previousElementSibling) {
return
obj.previousElementSibling;
}
else
{
return
obj.previousSibling;
};
}
function
firstnode(obj){
//獲取第一個子節點
if
(obj.firstElementChild) {
return
obj.firstElementChild;
//非IE678支持
}
else
{
return
obj.firstChild;
//IE678支持
};
}
function
lastnode(obj){
//獲取最后一個子節點
if
(obj.lastElementChild) {
return
obj.lastElementChild;
//非IE678支持
}
else
{
return
obj.lastChild;
//IE678支持
};
}
|
document.getElementsByClassName問題：
|
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
29
|
//通過類名獲取元素
document.getElementsByClassName(
''
);
//IE 6 7 8不支持；
//這里可以定義一個函數來解決兼容問題，當然別在這給我提jQuery...
//第一個為全局獲取類名，第二個為局部獲取類名
function
byClass1(oClass){
//全局獲取，oClass為你想要查找的類名，沒有“.”
var
tags=document.all?document.all:document.getElementsByTagName(
'*'
);
var
arr=[];
for
(
var
i = 0; i < tags.length; i++) {
var
reg=
new
RegExp(
'\\b'
+oClass+
'\\b'
,
'g'
);
if
(reg.test(tags[i].className)) {
arr.push(tags[i]);
};
};
return
arr;
//注意返回的也是數組，包含你傳入的class所有元素；
}
function
byClass2(parentID,oClass){
//局部獲取類名，parentID為你傳入的父級ID
var
parent=document.getElementById(parentID);
var
tags=parent.all?parent.all:parent.getElementsByTagName(
'*'
);
var
arr=[];
for
(
var
i = 0; i < tags.length; i++) {
var
reg=
new
RegExp(
'\\b'
+oClass+
'\\b'
,
'g'
);
if
(reg.test(tags[i].className)) {
arr.push(tags[i]);
};
};
return
arr;
//注意返回的也是數組，包含你傳入的class所有元素；
}
|
獲取元素的非行間樣式值：
|
1
2
3
4
5
6
7
8
|
//獲取元素的非行間樣式值
function
getStyle(object,oCss) {
if
(object.currentStyle) {
return
object.currentStyle[oCss];
//IE
}
else
{
return
getComputedStyle(object,
null
)[oCss];
//除了IE
}
}
|
設置監聽事件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//設置監聽事件
function
addEvent(obj,type,fn){
//添加事件監聽，三個參數分別為 對象、事件類型、事件處理函數，默認為false
if
(obj.addEventListener) {
obj.addEventListener(type,fn,
false
);
//非IE
}
else
{
obj.attachEvent(
'on'
+type,fn);
//ie,這里已經加上on，傳參的時候注意不要重復加了
};
}
function
removeEvent(obj,type,fn){
//刪除事件監聽
if
(obj.removeEventListener) {
obj.removeEventListener(type,fn,
false
);
//非IE
}
else
{
obj.detachEvent(
'on'
+type,fn);
//ie，這里已經加上on，傳參的時候注意不要重復加了
};
}
|
元素到瀏覽器邊緣的距離：
|
1
2
3
4
5
6
7
8
9
10
|
//在這里加個元素到瀏覽器邊緣的距離，很實用
function
offsetTL(obj){
//獲取元素內容距離瀏覽器邊框的距離（含邊框）
var
ofL=0,ofT=0;
while
(obj){
ofL+=obj.offsetLeft+obj.clientLeft;
ofT+=obj.offsetTop+obj.clientTop;
obj=obj.offsetParent;
}
return
{left:ofL,top:ofT};
}
|
阻止事件傳播：
|
1
2
3
4
5
6
7
8
9
|
//js阻止事件傳播，這里使用click事件為例
document.onclick=
function
(e){
var
e=e||window.event;
if
(e.stopPropagation) {
e.stopPropagation();
//W3C標准
}
else
{
e.cancelBubble=
true
;
//IE....
}
}
|
阻止默認事件：
|
1
2
3
4
5
6
7
8
9
|
//js阻止默認事件
document.onclick=
function
(e){
var
e=e||window.event;
if
(e.preventDefault) {
e.preventDefault();
//W3C標准
}
else
{
e.returnValue=
'false'
;
//IE..
}
}
|
關於EVENT事件中的target：
|
1
2
3
4
5
6
7
|
//關於event事件中的target
document.onmouseover=
function
(e){
var
e=e||window.event;
var
Target=e.target||e.srcElement;
//獲取target的兼容寫法，后面的為IE
var
from=e.relatedTarget||e.formElement;
//鼠標來的地方，同樣后面的為IE...
var
to=e.relatedTarget||e.toElement;
//鼠標去的地方
}
|
鼠標滾輪滾動事件：
|
1
2
3
4
5
6
7
8
9
|
//鼠標滾輪事件
//火狐中的滾輪事件
document.addEventListener(
"DOMMouseScroll"
,
function
(event){
alert(event.detail);
//若前滾的話為 -3，后滾的話為 3
},
false
)
//非火狐中的滾輪事件
document.onmousewheel=
function
(event){
alert(event.detail);
//前滾：120，后滾：-120
}
|
節點加載：
|
1
2
3
|
//火狐下特有的節點加載事件，就是節點加載完才執行，和onload不同
//感覺用到的不多，直接把js代碼放在頁面結構后面一樣能實現。。
document.addEventListener(
'DOMContentLoaded'
,
function
( ){},
false
);
//DOM加載完成
|