offset, client, scroll three series

1.offset can only get, can not be assigned

(1) element .offsetParent // returns the current location of nearest parent element

console.log (son.offsetParent)

(2) Elemental .offsetLeft // left offset of the return offsetParent

console.log (son.offsetLeft)

(3) elements .offsetTop // Return the offset offsetParent

console.log (son.offsetTop)

(4) element .offsetWidth // Returns the current element content + padding + border width

console.log (son.offsetWidth)

(5) Elementary .offsetHeight // Returns the current element high content + padding + border

console.log (son.offsetHeight)

2.client can not only get the assignment

(1) Elemental content element .clientWidth // wide visible area + padding

 console.log('clientWidth'+son.clientWidth) 

High content (2) elements .clientHeight // + padding element visible area

 console.log('clientHeight'+son.clientHeight) 

(3) elements .clientLeft // values ​​of the elements of the left border

(4) the value of the element .clientTop // element's border

var box = document.getElementById('box')
console.log(box.clientLeft) 
console.log(box.clientTop)

3.scroll

(1) element content element width .scrollWidth

console.log( son.scrollWidth)

.ScrollHeight high content of the element (2) element

console.log( son.scrollHeight)

(3) the left side of the rolling element content elements .scrollLeft out from the    can assign no need to write unit

(4) elements .scrollTop element content rolling out from the top    can be assigned no need to write unit

father.onscroll=function(){
  console.log( father.scrollLeft)
 console.log( father.scrollTop)

}

 4. window.innerWidth, window.innerHeight browser wide visible region can obtain a high, not assignable

console.log(window.innerWidth)
console.log(window.innerHeight)

5.window.pageXOffset, window.pageYOffset browser entire left side of the page and the top of the scroll out of the distance 

   window.onscroll=function(){
console.log(window.pageXOffset)   
console.log(window.pageYOffset)
    }

 

Guess you like

Origin www.cnblogs.com/zhaodz/p/11621152.html