offset、 client 、 scroll 三大系列

1.offset   只能獲取，不能賦值

（1）元素.offsetParent   //返回當前元素最近的定位父元素

console.log (son.offsetParent)

（2）元素.offsetLeft     //返回offsetParent的左偏移量

console.log (son.offsetLeft)

（3）元素.offsetTop      //返回offsetParent的上偏移量

console.log (son.offsetTop)

（4）元素.offsetWidth    //返回當前元素的寬  content+padding+border

console.log (son.offsetWidth)

（5）元素.offsetHeight   //返回當前元素的高  content+padding+border

console.log (son.offsetHeight)

2.client  只能獲取不能賦值

（1）元素.clientWidth    //元素可視區的寬   content+padding

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

（2）元素.clientHeight    //元素可視區的高   content+padding

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

（3）元素.clientLeft    //元素左邊框的值

（4）元素.clientTop    //元素上邊框的值

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

3.scroll

（1）元素.scrollWidth  元素內容的寬

console.log( son.scrollWidth)

（2）元素.scrollHeight 元素內容的高

console.log( son.scrollHeight)

（3）元素.scrollLeft  元素內容左側滾動出去的距離   能夠賦值 不須要寫單位

（4）元素.scrollTop  元素內容頂部滾動出去的距離   能夠賦值 不須要寫單位

 

    <style>
#box{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    margin: 100px auto;
    overflow:auto;
}
    </style>
    <script>
var box = document.getElementById("box")
box.onscroll = function(){
    console.log(box.scrollTop)
}
    </script>

 

 

 

 4. window.innerWidth、window.innerHeight    瀏覽器可視區的寬高  能夠獲取，不能夠賦值

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

5.window.pageXOffset、window.pageYOffset 瀏覽器整個頁面左側及頂部滾動出去的距離 

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

 6.window.pageYoffset | |document.documentElement.scrollTop || document.body.scrollTop   獲取頁面垂直方向的捲曲距離