一. offset系列1. offset系列的5个属性1. offsetleft : 用于获取元素到最近的定位父盒子的左侧距离 * 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 * 如果父级盒子没有定位, 那么会接着往上找有定位的盒子 * 如果上级元素都没有定位,那么最后距离是与body的left值
2. offsettop : 用于获取元素到最近定位父盒子的顶部距离 * 计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧 * 如果父级盒子没有定位,那么会接着往上找有定位的盒子 * 如果上级元素都没有定位,那么最后距离是与body的top值
3. offsetwidth :用于获取元素的真实宽度(除了margin以外的宽度)
4. offsetheight : 用于获取元素的真实高度(除了margin以外的高度)
5. offsetparent :用于获取该元素中有定位的最近父级元素 * 如果当前元素的父级元素都没有进行定位,那么offsetparent为body
2. 与style.(left/top/width/height)的区别:1. offset系列的是只读属性,而通过style的方式可以读写2. offset系列返回的数值类型(结果四舍五入),style返回的是字符串3. offsetleft 和 offsettop 可以返回没有定位的元素的left值和top值,而style不可以
二. scroll系列1.scroll系列的4个属性1. scrollheight :元素中内容的实际高度(没有边框) * 如果内容不足,就是元素的高度2. scrollwidth: 元素中内容的实际宽度(没有边框) * 如果内容不足,就是元素的宽度3. scrolltop: onscroll事件发生时,元素向上卷曲出去的距离4. scrollleft : onscroll事件发生时,元素向左卷曲出去的距离
2. 兼容问题(1) 兼容问题
* 未声明 dtd: 谷歌,火狐,ie9+支持
document.body.scrolltop/scrollleft* 已经声明dtd:ie8以下支持
document.documentelement.scrolltop/scrollleft
* 火狐/谷歌/ie9+以上支持的 window.pageyoffest/pagexoffest
(2) 兼容代码
function getscroll() {return {
left: window.pagexoffset || document.body.scrollleft || document.documentelement.scrollleft || 0,
top: window.pageyoffset || document.body.scrolltop || document.documentelement.scrolltop || 0
};
}
使用方法:
1. 取得scrollleft值: getscroll().left
2. 取得scrolltop值: getscroll().top
三. client系列1.client系列的4个常用属性(clienttop和clientleft这里不予介绍)1. clientwidth : 获取网页可视区域的宽度2. clientheight: 获取网页可视区域的高度3. clientx :获取鼠标事件发生时的应用客户端区域的水平坐标4. clienty :获取鼠标事件发生时的应用客户端区域的垂直坐标
2. 兼容问题(1) clientwidth 和 clientheight的兼容问题
//由浏览器对象不同导致* 未声明 dtd: 谷歌,火狐,ie9+支持
document.body.clientwidth/clientheight* 已经声明dtd:ie8以下支持
document.documentelement.clientwidth/clientheight* 火狐/谷歌/ie9+以上支持的 window.innerwidth/innerheight
(2) clientwidth 和 clientheight的兼容代码
function client(){if(window.innerwidth){return {"width":window.innerwidth,"height":window.innerheight
};
}else if(document.compatmode === "css1compat"){return {"width":document.documentelement.clientwidth,"height":document.documentelement.clientheight
};
}else{return {"width":document.body.clientwidth,"height":document.body.clientheight
};
}
}
使用方法:1. 取得clientwidth的值: client().width2. 取得clientheight的值: client().height
(3)clientx 和 clienty的兼容问题
//由事件参数对象的兼容性问题导致1. 谷歌,火狐,ie9+: 事件参数对象随着事件处理函数的参数传入2. ie8以下: event对象必须作为window对象的一个属性(window.event)
(4)clientx 和 clienty的兼容性代码
//将client和scroll的兼容问题进行对象的封装var evttools={//获取兼容的事件参数对象
getevt:function (e) {return window.event?window.event:e;
},//获取的是可视区域的横坐标
getclientx:function (e) {return this.getevt(e).clientx;
},//获取的是可视区域的纵坐标
getclienty:function (e) {return this.getevt(e).clienty;
},//获取向左卷曲出去的距离的横坐标
getscrollleft:function () {return window.pagexoffset||document.body.scrollleft||document.documentelement.scrollleft||0;
},//获取向上卷曲出去的距离的纵坐标
getscrolltop:function () {return window.pageyoffset||document.body.scrolltop||document.documentelement.scrolltop||0;
}
};
四.总结网页可见区域宽： document.body.clientwidth;
网页可见区域高： document.body.clientheight;
网页可见区域宽： document.body.offsetwidth (包括边线的宽);
网页可见区域高： document.body.offsetheight (包括边线的宽);
网页正文全文宽： document.body.scrollwidth;
网页正文全文高： document.body.scrollheight;
网页被卷去的高： document.body.scrolltop;
网页被卷去的左： document.body.scrollleft;
网页正文部分上： window.screentop;
网页正文部分左： window.screenleft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availheight;
屏幕可用工作区宽度：window.screen.availwidth;
以上就是总结javascript中的特效系列的详细内容。