Home > Article > Web Front-end > Summary of special effects series in JavaScript
1. offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离 * 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 * 如果父级盒子没有定位, 那么会接着往上找有定位的盒子 * 如果上级元素都没有定位,那么最后距离是与body的left值 2. offsetTop : 用于获取元素到最近定位父盒子的顶部距离 * 计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧 * 如果父级盒子没有定位,那么会接着往上找有定位的盒子 * 如果上级元素都没有定位,那么最后距离是与body的top值 3. offsetWidth :用于获取元素的真实宽度(除了margin以外的宽度) 4. offsetHeight : 用于获取元素的真实高度(除了margin以外的高度) 5. offsetParent :用于获取该元素中有定位的最近父级元素 * 如果当前元素的父级元素都没有进行定位,那么offsetParent为body
1. offset系列的是只读属性,而通过style的方式可以读写2. offset系列返回的数值类型(结果四舍五入),style返回的是字符串3. offsetLeft 和 offsetTop 可以返回没有定位的元素的left值和top值,而style不可以
1. scrollHeight :元素中内容的实际高度(没有边框) * 如果内容不足,就是元素的高度2. scrollWidth: 元素中内容的实际宽度(没有边框) * 如果内容不足,就是元素的宽度3. scrollTop: onscroll事件发生时,元素向上卷曲出去的距离4. scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离
(1) Compatibility issues
* 未声明 DTD: 谷歌,火狐,IE9+支持 document.body.scrollTop/scrollLeft* 已经声明DTD:IE8以下支持 document.documentElement.scrollTop/scrollLeft * 火狐/谷歌/ie9+以上支持的 window.pageYOffest/pageXOffest
( 2) Compatible code
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
1. clientWidth : 获取网页可视区域的宽度2. clientHeight: 获取网页可视区域的高度3. clientX :获取鼠标事件发生时的应用客户端区域的水平坐标4. clientY :获取鼠标事件发生时的应用客户端区域的垂直坐标
(1) Compatibility issue between clientWidth and clientHeight
//由浏览器对象不同导致* 未声明 DTD: 谷歌,火狐,IE9+支持 document.body.clientWidth/clientHeight* 已经声明DTD:IE8以下支持 document.documentElement.clientWidth/clientHeight* 火狐/谷歌/ie9+以上支持的 window.innerWidth/innerHeight
(2) Compatibility code between clientWidth and 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) Compatibility issue between clientX and clientY
//由事件参数对象的兼容性问题导致1. 谷歌,火狐,IE9+: 事件参数对象随着事件处理函数的参数传入2. IE8以下: event对象必须作为window对象的一个属性(window.event)
(4)Compatibility code of clientX and 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; } };
<code class="css">网页可见区域宽: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.clientWidth; 网页可见区域高: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.clientHeight; 网页可见区域宽: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.offsetWidth (包括边线的宽); 网页可见区域高: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.offsetHeight (包括边线的宽); 网页正文全文宽: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.scrollWidth; 网页正文全文高: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.scrollHeight; 网页被卷去的高: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.scrollTop; 网页被卷去的左: <span class="hljs-selector-tag">document<span class="hljs-selector-class">.body<span class="hljs-selector-class">.scrollLeft; 网页正文部分上: <span class="hljs-selector-tag">window<span class="hljs-selector-class">.screenTop; 网页正文部分左: <span class="hljs-selector-tag">window<span class="hljs-selector-class">.screenLeft; 屏幕分辨率的高: <span class="hljs-selector-tag">window<span class="hljs-selector-class">.screen<span class="hljs-selector-class">.height; 屏幕分辨率的宽: <span class="hljs-selector-tag">window<span class="hljs-selector-class">.screen<span class="hljs-selector-class">.width; 屏幕可用工作区高度: <span class="hljs-selector-tag">window<span class="hljs-selector-class">.screen<span class="hljs-selector-class">.availHeight; 屏幕可用工作区宽度:<span class="hljs-selector-tag">window<span class="hljs-selector-class">.screen<span class="hljs-selector-class">.availWidth;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br/><br/><br/>
The above is the detailed content of Summary of special effects series in JavaScript. For more information, please follow other related articles on the PHP Chinese website!