Home  >  Article  >  Web Front-end  >  Summary of special effects series in JavaScript

Summary of special effects series in JavaScript

零下一度
零下一度Original
2017-06-26 10:25:491289browse

1. Offset series

1. Five attributes of offset series

1. offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离    * 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧    * 如果父级盒子没有定位, 那么会接着往上找有定位的盒子    * 如果上级元素都没有定位,那么最后距离是与body的left值

2. offsetTop : 用于获取元素到最近定位父盒子的顶部距离    * 计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧    * 如果父级盒子没有定位,那么会接着往上找有定位的盒子    * 如果上级元素都没有定位,那么最后距离是与body的top值

3. offsetWidth :用于获取元素的真实宽度(除了margin以外的宽度)

4. offsetHeight : 用于获取元素的真实高度(除了margin以外的高度)

5. offsetParent :用于获取该元素中有定位的最近父级元素    * 如果当前元素的父级元素都没有进行定位,那么offsetParent为body

2. The difference between style.(left/top/width/height):

1. offset系列的是只读属性,而通过style的方式可以读写2. offset系列返回的数值类型(结果四舍五入),style返回的是字符串3. offsetLeft 和 offsetTop 可以返回没有定位的元素的left值和top值,而style不可以

二. scroll series

1. 4 attributes of scroll series

1. scrollHeight :元素中内容的实际高度(没有边框)    * 如果内容不足,就是元素的高度2. scrollWidth: 元素中内容的实际宽度(没有边框)    * 如果内容不足,就是元素的宽度3. scrollTop: onscroll事件发生时,元素向上卷曲出去的距离4. scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离

2. Compatibility issues

(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

3. Client series

1. The 4 common attributes of the client series (clientTop and clientLeft will not be introduced here)

1. clientWidth : 获取网页可视区域的宽度2. clientHeight: 获取网页可视区域的高度3. clientX :获取鼠标事件发生时的应用客户端区域的水平坐标4. clientY :获取鼠标事件发生时的应用客户端区域的垂直坐标

2. Compatibility issues

(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;
        }
    };

4. Summary

<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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn