Zusammenfassung der Spezialeffektserien in JavaScript

1. Offset-Serie

1. 5 Attribute der Offset-Serie

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

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

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

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

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

2. Unterschied zum Stil.(links/oben/Breite/Höhe):

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

2. Scroll-Serie

1. 4 Attribute von Scroll-Serien

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

2. Kompatibilitätsprobleme

(2) Kompatibler Code

* 未声明 DTD: 谷歌,火狐,IE9+支持

  document.body.scrollTop/scrollLeft* 已经声明DTD:IE8以下支持

 document.documentElement.scrollTop/scrollLeft 

* 火狐/谷歌/ie9+以上支持的  window.pageYOffest/pageXOffest

3. Client-Serie

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. 4 gemeinsame Attribute von Client-Serien (clientTop und clientLeft werden hier nicht vorgestellt)

2. Kompatibilitätsprobleme

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

(1) Kompatibilitätsprobleme zwischen clientWidth und clientHeight

(2) Kompatibilitätscodes zwischen clientWidth und clientHeight

    //由浏览器对象不同导致* 未声明 DTD: 谷歌,火狐,IE9+支持

document.body.clientWidth/clientHeight* 已经声明DTD:IE8以下支持

document.documentElement.clientWidth/clientHeight* 火狐/谷歌/ie9+以上支持的 window.innerWidth/innerHeight

(3) Kompatibilitätsprobleme zwischen Clients

Das obige ist der detaillierte Inhalt vonZusammenfassung der Spezialeffektserien in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!