码迷,mamicode.com
首页 > 其他好文 > 详细

offset、 client 、 scroll 三大系列

时间:2019-10-04 09:19:37      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:border   The   内容   document   top   width   page   fun   pagex   

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  元素内容顶部滚动出去的距离   可以赋值 不需要写单位

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

}

 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)
    }

 

offset、 client 、 scroll 三大系列

标签:border   The   内容   document   top   width   page   fun   pagex   

原文地址:https://www.cnblogs.com/zhaodz/p/11621152.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!